NathanWalker / nativescript-fonticon

Use custom font icon collections seamlessly with NativeScript.
50 stars 47 forks source link

Icon with text #3

Open ElMohMoh opened 7 years ago

ElMohMoh commented 7 years ago

Thank you for this job.

I have one question. When we use the syntax like this: `

`

The icon is rendered with the text but when I use this solution:

`

`

The icon is not rendered. How can I do to render the icon with your solution?

Thanks

JoeyHengst commented 7 years ago

Hi @ElMohMoh I use the following and the icon is rendered :

<Button text="{{'fa-facebook' | fonticon}} Inloggen Facebook" class="fa btn btn-primary facebookButton" (tap)="loginFacebook()">

I also have a module where I import the TNSFontIconModule like this :

import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NgModule } from "@angular/core";
import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';
import { LoginComponent } from "./login.component";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    TNSFontIconModule.forRoot({
            'fa': 'fonts/font-awesome.css'
        })    
  ],
  declarations: [
    LoginComponent
  ]
})
export class LoginModule { }

And then in the component's constructor I do this :

private fonticon: TNSFontIconService,

Only problem I have with this is that my text is cut off

@NathanWalker

screen shot 2017-02-14 at 20 56 11

LorenDorez commented 6 years ago

Hello, this still isnt working. i tried

<Button text="{{'fa-sign-in | fonticon}} Sign In" class="fa btn btn-primary btn-md" tap="signIn" />
moayadnajd commented 6 years ago

hey maybe this syntax will help

<Label class="fa" text="{{ fonticon('fa-home') + 'Home' }}"></Label>

LorenDorez commented 6 years ago

@moayadnajd Thanks that seems to work

thearabbit commented 5 years ago

don't work for me.

// NativeScript Vue 2
<Label
            class="fa"
            text="{{ fonticon('fa-home') + 'Home' }}"
          ></Label>

Get error

text="{{ fonticon('fa-home') + 'Home' }}": Interpolation inside attributes has been removed
diezcode commented 4 years ago

A little bit late but this is working for Vue:

<Label class="fa">{{'fa-home' | fonticon}} Home</Label>

but I dont know how you can add a Text after the Icon

thearabbit commented 4 years ago

Thanks I will try