I'm having a problem with Font Awesome. In the following jsfiddle you can see that I am getting some really weird character instead of a bluetooth icon
https://jsfiddle.net/petarvasilev/q5bjz945/2/
this is the code that I am using
<div class="fa-bluetooth fa-4x"></div>
and this is the link I am using to import font awesome
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
any help much appreciated : )
There is no need to include font itself. This is how you should use it:
<div class="fa fa-bluetooth fa-4x"></div>
You are missing "FA" class name for your icon.
Related
I might be asking a dumb question, but I am a newbie in javascript and its libs.
I came across the same problem as this post, and in the accepted answer, there was this line
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
However, after adding this line I have a navbar icon even though I did not include a img in my html. I also cannot manipulate the position of this icon built with this stylesheet. Can anyone explain what it does in this context? (referring to the post) I noticed that without this line of code the CSS and Javascript cannot be applied to a simple
<img class="search" src="icon.png" width="30" height="30">
And how is it possible for me adjust the location of the icon with this line of code?
font awesome is a css sheet, that when you use "font awesome classes" on a particular element, makes an icon appear. there's no jpgs or anything to mess with.
<i class="fa fa-address-book" aria-hidden="true"></i>
in a plain html, this will do nothing. but if you add the stylesheet to the page, you will see an address book icon.
all icons are located here: http://fontawesome.io/icons/
I downloaded the font-awesome package, and I included the css file in my page as instructed, but it doesn't work. It displays as "fl".
before you add any font awesome class add "fa" before it,
like [ class="fa fa-search" ] to get ride of this issue.
credit goes to Nabil kadimi's answer at this Font Awesome not working, icons showing as squares post
This question already has answers here:
How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
(5 answers)
Closed 7 years ago.
I would like to use font awesome within my jsf app, but unfortunately it seems, that some icons are not displayed.
Instead of the icon I just could see a square symbol.
My jsf page look like this:
<div class="centerbox" style="bottom: 5mm; top: 5mm;">
<i class="fa fa-chain fa-5x"></i>
<i class="fa fa-wheelchair fa-5x"></i>
<h:outputLabel value="#{msg.systemNotAvailable}" />
<h:outputText value="Allocation"/>
</div>
I included the css file as follows:
<h:outputStylesheet name="font-awesome.css" library="css" media="screen"/>
The strangs thing is, that the fa-chain icon is displayed correct, but the wheelchair icon not.
When I look into the html and change the code of the icon, it seems that there are a couple of icons not working.
I tried this with the lated version 4.4.0
Does anybody else face this problem or can give me a hint how to fix?
You can always use the live css from MaxCDN, example:
http://jsfiddle.net/web_nfo/zfdgna5w/
https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
( Source: https://fortawesome.github.io/Font-Awesome/get-started/#bootstrapcdn )
Maybe the font files (fontawesome-webfont.eot, fontawesome-webfont.woff2, etc) are not loaded properly. In the css there are some relative paths, if you do not have the fonts on your (local) server it does not work.
first of all thanks for your reply.
I think the problem was, that the font files were installed in resource folder in webapp.
Since I put it into the WebContent- root all icons could be displayed.
Thank you very much for your support :-)
So far all all the icons are working on http://702ishome.com/summerlin-villages/arbors/ except for 1 --- the fa-user-secret icon will not work on my site.
Any thoughts on why it doesn't show while all the others do?
THANKS!
You are using version 4.2 of Font Awesome, but fa-user-secret was added in 4.3.
Source:
http://fortawesome.github.io/Font-Awesome/whats-new/
fa fa-user-secret (Normal)
far fa-user-secret (Regular)
fas-user-secret (Solid)
try using variations of the fa, far and the fas... I had an issue where the icon failed to reference Icon in the FontAwesome directory.
Font Awesome has recently changed icons notation from for example icon-shield to fa-shield.
But where has icon previously known as icon-remove-sign gone in the same time? I can't find it anywhere within Font Awesome 4.0.3 icon list. Actually I don't see anything with remove in name or anything that would "accompany" (as opposite) icon (now called) fa-check.
In general, nearly every FA's "yes"-like icons have their counterparts ("no"-like icons). In general, you have variety of icon-sets for both "success" and "fail"-like situations. But this one is clearly missing.
It appears the icon is now called fa-times: http://fontawesome.io/icon/times/.
At least as I understood the changes, the names should be more consistent with the actual icon shape, and "times" is the correct name for ×.
The exact missing icon-remove-sign in Font Awesome 4.0 is fa-times-circle
<i class="fa fa-times-circle"></i>
and variation
<i class="fa fa-times-circle-o"></i>