I'm trying to update some theme from fontawesome 4 to 5. So far everything seems to work fine, the icons in i tags are displayed. Except for one specific icon that displays as a css pseudo-element.
I followed what the FA docs said but the icon still doesn't appear. Not even as a square, just as a plain nothing.
Here's the codes used. It's supposed to display an icon in the middle of the hr :
html head:
<link href="css/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
html body:
<hr class="star-light">
css:
hr.star-light:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-size: 2em;
font-style: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
I also tried to put the conflict detection script and it actually found one... But it doesn't make sense since there's only one conflict: the fa's css itself all.min.css... And i'm not even sure it's linked to the problem... It's been 2 hours i'm stuck there and my searches didn't give me anything relevant. Anyone have an idea of what's going on? Or things i can try?
Here's the whole repository, in case you want to try. it's a hugo theme. My repo already includes fontawesome 5:
https://github.com/maxlefou/hugo-freelancer-theme
EDIT: I just found the issue. It's just silly: the problem only occurs on chrome and chromium browsers. Everything works on Firefox. Go figures...
Thanks for your help.
Try changing the font-family: "Font Awesome 5 Free"; to font-family: "FontAwesome";
This will solve the issue.
Related
I am trying to use FontAwesome in the content of CSS.
It appears with the code for the icon instead of the icon. I have followed the online helps but still not working
css
#font-face {
font-family: 'FontAwesome';
src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
}
.fp-prev:before {
color:#fff;
content: '/f35a';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version
First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Or within the CSS file:
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")
Then you need to correct the font-family and the content like below:
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color:#000;
content: '\f35a'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
font-style: normal;
font-weight: normal;
font-size:40px;
}
<i class="fp-prev"></i>
In some cases, you have to also add
font-weight:900
More detail here: Font Awesome 5 on pseudo elements shows square instead of icon
As a side note: Font Awesome 5 provide 4 different font-family for each pack of icons:
Font Awesome 5 Free for the free icons.
Font Awesome 5 Brands for the brand icons like Facebook, Twitter, etc.
#import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {
color: #000;
content: "\f099";
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
<i class="fp-prev"></i>
Font Awesome 5 Pro for the Font Awesome Pro.
Font Awesome 5 Duotone also included in the Pro package.
Related: Font Awesome 5 Choosing the correct font-family in pseudo-elements
Make your font-weight: 900;. I see you miss it
This is not showing because of color -issue . Please follow step :-
Step- 1. Copy this style in your page
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
Step- 2. copy this code at the top of your all.css in your page .
#import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css");
Step- 3. Use the font-family and the content and color like
.password_invalid:before {
color: #ff0000;
content: '\f058'; /* You should use \ and not /*/
font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
position: relative;
margin-left: -36px;
padding-right: 13px;
font-weight: 400;
}
This Happened to me too. I had used this icon: as was using font awesome 5 cdn.
But when I tried to select the same class and then edit the icon, the css editing didn't run on the icon.
So the removed the "fas" from ".fas fa-plus-square" on the css selector and made it ".fa-plus-square{}".
So the CSS was like this (for me) : .fa-plus-square{
float: right;
} where i removed the "fas". And it worked for me.
where the Html class was <i class="fas fa-plus-square"></i>
And the cdn that I used: "https://use.fontawesome.com/releases/v5.0.7/css/all.css".
Hope this helps you
When you want to include FontAwesome the url you provided should be inside thehead tag as a stylesheet file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
Then you can use Font Awesome as you have done.
I know I'm really late to answer this.
You have to include Fontawesome CSS in the header.
CDN -
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
If you have downloaded the source files then include as follows
<link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />
Later you have to add the CSS as follows -
.fp-prev:before {
color:#000;
content: '\f35a'; /* replace / with \ */
font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
font-style: normal;
font-weight: 900;
text-decoration: inherit;
}
if you wish to add it via <i> tag then you can follow
<i class="fas fa-arrow-alt-circle-right"></i>
Make sure your font weight is 900.
Refer - https://github.com/FortAwesome/Font-Awesome/issues/11946
An issue was raised in GitHub for the same. They have suggested that for the solid font awesome icons the font-weight should be 900.
Hope this will help you all.
I have a joomla site and i tried to use the font "Montserrat" from google on some classes.
The font looks good on chrome and I.E., but looks bold or bolder on firefox.
The css that i tried
p
{
font-weight: normal;
}
p
{
font-weight: 400;
}
I found a thousand topics on internet, no solution.
Try this maybe help:
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font-weight: 500;
}
/* and browser specific rule at the bottom */
#-moz-document url-prefix() {
body {
font-weight: lighter !important;
}
}
I've been struggling with this:
CSS pre-processor is removing quotation marks
...then I've found out that:
CSS processor (cssnano) in our React app is removing quotation marks
So my font is loading locally from my computer, not from Google's servers.
This causes a different font file in Firefox than in Chrome.
Check this out: https://github.com/cssnano/cssnano/issues/177
I have the following problem.
On mobile browsers the font (which is loaded with #font-face) seems to have a weird offset in its line-height. It appears to move towards the top a little bit.
I figured out it's the font. When I load Open Sans for example...no problem.
#font-face loaded font (Rubrik):
http://s12.postimg.org/gnre9viod/Rubrik.png
Open Sans:
http://s27.postimg.org/s4jgc6zyb/Open_Sans.png
Look at the small grey text saying 't/m 6 maart 2016'
It's shifted to the top.
I have tried:
Fix/Automatic verticle metrics with fontsquirrel
Redownloading the original font and generating webfonts with different generators
I have the following CSS:
body {
height: 100%;
width: 100%;
font-family: $typenormal;
font-weight: normal;
font-size: 18px;
#media(max-width: 991px) {
font-size: 14px;
}
line-height: 1.5;
color: #111;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
I am loading:
eot
eot / IEfix
woff
woff2
ttf
svg
Doesn't work. Any other idea's than to use Open Sans?
Try using SVG instead of the other types of the font. (Edit #font-face)
Since Rubrik font doesn't have one, you may want to convert .otf to .svg at the link below.
https://onlinefontconverter.com/
I have followed the instructions on the google fonts website over an over and my webpage displays as it should on MY laptop, however, the fonts 'FJALLA ONE' does not load on any other computer or device.
Am I doing something wrong? Can I store the fonts in a folder and link them like a css file?
Here is my html - part 1:
head>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
part 2:
<div class="box">
<h1 class="animated bounceInDown">SHEREE WALKER </h1> </div>
My CSS
.box h1 {
font-family:'FjallaOne', sans-serif; !important;
font-size:45px;
text-align:center;
color:#FFF;
padding-top: 10%; }
Am I missing something? Any help would be amazing. I'm at my wits end.
Your problem probably exists in this piece of code:
font-family:'FjallaOne', sans-serif; !important;
it should be
font-family:'Fjalla One', sans-serif !important;
OR
font-family:'Fjalla One', sans-serif;
If that still does not fix it try removing , sans-serif
Your problem is not with your code. It is fine. I would remove the !important though, it's not necessary and the syntax is also not correct, but the code will still work even with wrong syntax.
What your real problem is: the text is white so you will never see it on a white background. You can see it here working with red text-> http://jsfiddle.net/sxntrvrj/1/
h1 {
font-family: 'Fjalla One', sans-serif;
font-size:45px;
text-align:center;
color:red;
padding-top: 10%;
}
I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn't be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.
Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?
Here's the css rule:
ul#menu li a
{
width: 80%;
text-align: center;
font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
line-height: 38px;
color: #333;
text-shadow: 0px 1px 0px #e5e5ee;
display: block;
/*Hiding dots around clicking on links*/
outline: none;
overflow: hidden;
}
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
With another CSS rule for the font-size property in this css file.
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.
Perhaps the CSS for some other property is inconsistent? I'd try using a CSS reset file (http://developer.yahoo.com/yui/reset/) or adding zoom: 100% in there to see if that fixes it.