I am trying to assign some of the new 4.3 icons to my forum nodes.
Here is the forum link: enter link description here
The problem I am having is the older icons show up just fine, but the new icons show up as a square white box.
Here is some existing working code followed by the new icon code that is not working.
Working Icon:
/* General Chat */
.node_9 .forumNodeInfo .nodeIcon:before {content: '\f1d7' !important;}
Not Working Icon:
/* Requests */
.node_112 .forumNodeInfo .nodeIcon:before {content: '\f234' !important;}
I have no idea how to fix this. Any help would be appreciated.
I did read this:
EASY: Default CSS
Use this method to get the default Font Awesome CSS.
Copy the entire font-awesome directory into your project. In the
of your html, reference the location to your
font-awesome.min.css. Check out the
examples to start using Font Awesome!
I do not understand what it is asking me where to do, as all of my customization are in extra.css . I do not have a RAW html site that uses
Thank You
You are using the old CDN reference URL for FontAwesome.
Replace in header
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
with this
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Related
I've been using fontawesome for one of my web projects and it works fine when I use the CDN link as its stylesheet but when I want to have everything locally and download FontAwesome(zip file) from the website, it becomes messy and shows multiple icons as some kind of bad zoom problem over its png file of icons.
the only change is
this
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
into this
<link src="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet">
Again, the problem isnt that its not working, its how it shows multiple icons.
Assure you have downloaded the full package with correct version from the FontAwesome website and use a correct link, such as:
<link href="assets/css/font-awesome/css/font-awesome.css" rel="stylesheet" >
Reset your browsers cache.
Assure that the or element you use, uses the FontAwesome font family. For example:
<i class="fa-pencil" title="Edit"></i>
but
<i class="fa fa-pencil" title="Edit"></i>
It won't work if you have something as the following in your CSS:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
If you are using IE, just dont...
If this doesn't work, just give it one hour or two(trust me sometimes browser plays jokes on itself), if problem was persistant, check https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting
I want to know, how can I use the font awesome's offline icons with :before or :after pseudo in CSS?
If I use CDN instead of offline then it Works perfectly but not with offline files.
.mydiv::before {
content: "\25AE";
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
How to set it up depends on your solution. Are you using simple CSS or any CSS preprocessors?
Let's assume you are using simple CSS:
Download and extract the package
Copy two folders: /webfonts and /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets).
Link it in the head tag of every HTML page that you need
like this:
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
</head>
For more info, take a look at the official guide on how to host it by yourself: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Download required file from Font Awesome website
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Create a new folder /fonts/
Unzip the download into this folder.
Then add <link href="fonts/css/all.css" rel="stylesheet"> in the <head> section.
It is easy to use them in your webpage, for examples see https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
I have a blog. Now I want to use a font icon for Menu bar for good quality.
But I can't upload it to blogger as there's no option. So is there any way to use it without uploading it to blogger?
you can use a CDN and link it in your project like this
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
As answered you can use fontawesome cdn or if you want to further optimize, you can choose specific icons and load a css file.
you can use http://fontello.com/ or https://icomoon.io which are awesome tools for this.
hope this helps :)
So I've been slowly trudging my way through a responsive eBay listing template using Bootstrap, it took some trial and error but I seem to have nailed everything down except the ability to use font-awesome in the listing.
The first attempt at a solution was to point to the font-awesome cdn for the css file which is supposed to include the necessary information to embed the font, but it did not work.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
I read somewhere else where the link had http: in front, so I tried that, it also didn't work.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Then I tried to point it all directly to my own server. So I put a full path to the css file on my server:
<link rel="stylesheet" href="http://www.lqskins.com/ebay/font-awesome/css/font-awesome.min.css">
Then I edited the css file directly in order to put the correct path to the font files themselves in the css file, example:
src:url('http://www.lqskins.com/ebay/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0')
None of these solutions have worked. If I pull up my test template on the server that points to the same css file, they work fine there. Is there a way to load font-awesome for use within an ebay listing, or is crippled beyond workability?
I am having no issues with this. The following code correctly displays a cog in my ebay listing.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-cogs"></i>
How can I use font-awesome in css? I searched and see that I just need to download and copy font-awesome directory into my porject then display the icon by using content in css. But instead of displaying awesome icons, it displayed weird and undefinable characters. Does anyone know how to use/fix it properly?
add this in the head of your html page: <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">