:before{content:""} can i use something like this in {N} css?


#1

i want to define an font icon by css , so i don’t have to set TEXT property everytime i needed an icon , i have tried :

.train{
font-family:XXXXX;
font-size:14;
color:#000;
text:"\f231";
// content:"\f231"
} 

nothing works, any advise would be really appreciated !


#2

This problem can be solved either with or without a plugin, but I prefer the latter. See http://www.nsplugins.com/search/font


#3

thanks @Eddy , i noticed the plugin , just curious how does the non-pugin way work ? would you mind give me a clue ?


#4

@Eddy even more , could you give me some advise on this one ?
https://discourse.nativescript.org/t/do-n-layout-containers-have-default-initial-css-property-values/1873

i hope i am not asking too much , thank you so much !


#5

I Googled it for you, first hit: https://www.google.nl/search?q=nativescript+font+icon&oq=nativescript+font+icon&aqs=chrome..69i57j69i60l2j0j69i61.51365j0j7&sourceid=chrome&ie=UTF-8


#6

thanks, @Eddy i have not made my point clear , sorry !

my scenario is , i will fetch data from some web service , one item of the data set is , possible means of traveling , maybe anyone of train/plane/bus/ship/foot/bike…, i need to display this field as icon on my app , i know i can store it in a dict (array), transportation name as key and icon unicode as value , when i fetched the data from web service , i loop through the dict , find corresponding icon unicode and assign it to TEXT property of my xml Label .

i am guessing the better way might be , i pre-define all possible icon types as css classes , so when i got the data , i need no looping the dict , just assign the pre-defined css class name to Label’s class property , it is more efficient ? this is why i am asking ~

am i thinking right ?

thanks again !


#7

hi, I stumbled across this in hopes of appending a colon at the end of my labels, which would make my field label colons aligned (esp. if I’m using the .input-sides class )

and tried

.colon::after{
content: ":"
}

right now, adding another label with a colon as its text worked for me…