I've seen this 'FontAwesome icons looks pixelated/blurred' issue various times on stackoverflow or their github but none of the solutions worked out for me.
Here is an example:
https://plnkr.co/edit/CmviS7TuPcIJX20G?preview
The top 3 list items use Font-Awesome to create a 'fancy checkbox' while bottom 3 list items use a regular border-radius (and some transformed rectangles to form the checkbox... not optimal).
The bottom 3 border-radius list-items looks much better to me than the top 3 FontAwesome ones (but the form framework we using uses Font-Awesome so hoping to just fix it with some simple CSS fix).
I checked latest version of Chrome/Firefox/Edge/Opera (on Window7)...
The top 3 list-items which use Font-Awesome look a bit jagged on all browsers (especially the main white circle). Attached is a pic:
I'm using FontAwesome 4.3 but seems like people had the same type of issues in Font-Awesome 5 as well (believe I tried that FontAwesome 5 file as well to no avail).
Things I've tried which seen on other posts:
put the SVG font file higher up in the #font-face css rule in the
font-awesome.css file (i tried that locally on my computer but that
didn't work).
adding something like "-webkit-font-smoothing:
antialiased;"
adding a temporary tranform onto the checkbox item
like "transform:rotateZ(0.5);"
use a font-size in a multiple of 12px or 14px or 16px (depending on which version of Font-Awesome using). For this example, I used 14px since that seems to be the base font-size for .fa.
Open to suggestions to try,
Thanks!
Have to post some code if I am linking to a plunkr so here is the main CSS for the Font-Awesome items:
.has-font-awesome li:before {
font-family: FontAwesome;
font-size: 48px;
content: '\f111';
color: white;
position: absolute;
top: 0px;
left: 0px;
}
.has-font-awesome li:after {
font-family: FontAwesome;
font-size: 36px;
content: '\f00c';
color: black;
position: absolute;
top: 7px;
left: 3px;
}
After enabling Windows ClearType, and restarting computer then the FontAwesome icons look as crystal clear as the border-radius icon:
Looks great on all 4 browsers now.
Apparently "ClearType is enabled by default in Windows 7, 8, and 10".
So maybe i turned it off.
I have a font icon in use in a site I support, and an issue has been raised that it is no longer displaying, and instead displays the square not found icon.
font-family: 'iconfont';
display: block;
content: "\ea10";
height: 100%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 100%;
Can anyone explain how this will have happened, as I can see this working in a time machine and the font hasn't changed since then.
Thanks
Open devtools in browser and verify that the font exist.
Check the network tab to see if the font is downloaded when the page is loaded.
As you can see here the following fonts are downloaded.
In your case check the style to see if the style does have this font in its list.
Verify that no other style overwriting this font
I saw example of a site which is using a separate font file (woff) and using the source code as
<span id="txt44_1109014" data-width="147.274994" style="left:
58.538px; top: 23.413px; letter-spacing: -0.596739391304348px;">®euee Deelee DeeHeCe ³ee</span>
Below are the CSS for this element
#txt44_1109014, #txt45_1109014, #txt46_1109014 {
font-family: fnt0;
font-size: 25px;
line-height: 29px;
font-weight: bold;
color: #000000;
}
In the source code I saw there is a .woff font file which is coming from network(server).
I want to know what is this method(any specific name)?
We can do same thing via usign unicodes still what is the benific of this?
Any standard document for this present on net?
When I looked up the theme files , It has a folder Named glyphicons , in /wp-content/plugins/nhpoptions/img/glyphicons , This folder has png images naming glyphicons_000_glass.png and so on , upto glyphicons_349_readability.png , I thought it would be too simple and I just need to replace the images with my own so I renamed my image glyphicons_349_readability.png and replaced the old one but this did not solved it. Still the same icon is appearing . Please tell me what am I missing ,
here is the screenshot of the dir
Test Site Link = http://test.yoapp.nl/
Theme = http://themeforest.net/item/couponer-coupons-discounts-wp-theme/8322172
*****UPDATE*****
There is a file named font-awesome.min.css in the theme , It has the icons added from font awesome , Now I figured out to add more icons from font awesome but still I am stuck on adding my own icons.
The author(s) of the theme is using CSS to embed the icons using the font-family and content attributes in the style.css file. For example:
style.css - line 713
.filter-tabs ul.nav-tabs li.active:before {
font-family: 'FontAwesome';
font-size: 32px;
color: #24b6ac;
content: '\f0d7'; /* This refers to fa-caret-down */
position: absolute;
bottom: -14px;
left: 47%;
}
And
a.btn-top:before {
font-family: "FontAwesome";
font-size: 31px;
content: "\f0da"; /* refers to fa-caret-right */
position: absolute;
left: 14px;
color: #fff;
top: 128px;
}
These can be found in your style.css file. There is 4 more instances which you can track down yourself I'm sure. This is done by setting the font-family attribute to Font-Awesome and setting the unicode for the content property. You can see a full list of the icons, including their class and unicode here: http://fortawesome.github.io/Font-Awesome/cheatsheet/
I have some CSS that looks like this:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
I would like to replace the image with an icon from Font Awesome.
I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?
You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
Be sure to set position:relative on your actual text wrapper for the positioning to work.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
Font Awesome v5 uses other font names than older versions:
For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weight property, too (seems to be 900).
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).
Actually even font-awesome CSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the icon code, check the non-minified font-awesome.css file and there they are....each font in its purity.
Consolidating everything above, the following is the final class which works well
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
To use font awesome using css follow below steps -
step 1 - Add Fonts of FontAwesome in CSS
/*Font Awesome Fonts*/
#font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
Step - 2 Use below css to apply font on class element of HTML
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.
You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "\f007";
}
I am bit late to the party. Just like to suggest another way.
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
position, left and bottom are used to align the icon.
Sometimes adding font-weight: 600 or above also helps.
No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link:
https://codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from:
https://fontawesome.com/cheatsheet?from=io
Alternatively, if using Sass, one can "extend" FA icons to display them:
.mytextwithicon:before {
#extend .fas, .fa-angle-double-right;
#extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in.
Here is my solution to have a "real" background effect :
html :
<div id="bloc" class="bg_ico_outer" style="">
<i class="fa fa-bookmark-o bg_ico"></i>
<div class='bloc_inner'>
<h2>test fontawesome as background</h2>
</div>
</div>
css :
.bg_ico {
position: absolute;
top: 0px;
right: -10px;
font-size: 17em;
color: green;
transform: rotate(25deg);
}
.bg_ico_outer{position: relative; overflow: hidden;}
#bloc{
height: 200px;
width:200px;
background: blue;
margin:50px auto;
}
.bloc_inner{
position: absolute;
}
h2{color: white;}
For this you just need to add content attribute and font-family attribute to the required element via :before or :after wherever applicable.
For example: I wanted to attach an attachment icon after all the a element inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::before pseudo property to fetch out the content tag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
This seems to be the simplest solution :-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}