For collapse/expand icons curretnly I have this in my Razor code:
<span class="glyphicon glyphicon-minus"></span>
So it has the "+" and "-" icons that my JS uses to toggle between them.
Now I want to use Up and Down arrows, how can I use FontAweosme up and down arrows?
I think this would work:
<span><i class="fa fa-angle-up"></i></span>
<span><i class="fa fa-angle-down"></i></span>
To replace "Glyph Icons" with "FontAwesome"
Visit: https://fortawesome.github.io/Font-Awesome/get-started/ and follow instructions.
Icon-font replacement and custom font glyphs
If you're looking for in depth control over custom fonts and glyph-class-names, see these answers: How to create custom font icons?
Related
So, I am using Angular and started using FontAwsome. I want to put the text inline, not in 3 lines like in the image above.
The above text is "4 BANJA LUKA".
The other solution would be to make the margins between the lines smaller, so it can fit the icon without making the icon too large (for example 4x or 5x).
Does anybody know the solution?
<span class="fa-stack"> <i class="fas fa-comment-alt fa-3x" style="color:yellow;"></i> <i class="fa-stack-1x" style="font-size:10px;">4 BANJA LUKA</i> </span>
One Way
you are want below manner to add font awesome.
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
Am trying to use a font awesome icon as a button to implement the like feature in my web application, using bootstrap 4 and font awesome
<button class="icon-button" onclick="actOnStory(event);"data-story-id="<%= story._id %>">
<i class="far fa-heart"></i>
</button>
my current code results in the icon being inside the button and not being the button itself
No need to wrap <i> with <button>, since onclick event can be called on icon as well. Just make it
<i class="far fa-heart" onclick="actOnStory(event);" data-story-id="<%= story._id %>"></i>
My website is https://waki.vn, it does not display icon in menu.
http://prntscr.com/khlyka
please help me to fix it. Thank you
You are referencing the icon as <i class="icon-angle-down"></i>.
Such an icon does not exist.
The proper way to use this icon is <i class="fas fa-angle-down"></i>as you can find out via https://fontawesome.com/icons/angle-down?style=solid.
I am having trouble deleting the outline of the button in CSS. I have to put the font awesome icon in button, so that it is accessible for screen . But I couldn't delete the outline of the button using outline:none or outline:0 in CSS.
<button class="fa fa-calculator" aria-label="calculator"></button>
I guess by outline you mean border?? Since both have different meaning in CSS it's easy to get confused.
Den use
<button class="fa fa-calculator" style="border:none">
Or use this
.Fa.fa-calculator{Border:none;}
& If you are specifically talking about outline den you ll have to share your CSS file mate!!:)
I'm stucking on a little issue with awesome fonts icons. I've a wordpress website and I use awesome icons, in particular "battery" icons.
In 1st page I can see the battery icon, but in 2nd page I can't see battery icon, just white space, anyway in 2nd page I can see all icon types, except battery icon...
I can notice that in battery icon I don't see the code ::before in tags...
maybe this could be the issue... ?!
<i class="fa fa-battery-full"></i>
where I see the icon the code is:
<i class="fa fa-plug">::before</i>
Have you tried the last version of FA? try to change the version
Download Here
Maybe the FA that your used is old, Try that.