I have a conflict with font awesome when 2 different css versions are used. I am not trying to use 2 different version, but my plugin embeds one version and sometimes a wordpress website has another version.
I am interested in this particular example, why doesnt first icon display if they both have same :before content?
(I have noticed it works if fa5 is linked first in the page)
What would be the easiest solution to handle this?
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<i class="fa fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
https://jsfiddle.net/pfbx5865/1/
It's possible to have both libraries in parallel, just keep in mind: The style sheet loaded the latter "wins". It makes more sense to load FA5 first and then let FA4 overwrite the FA4 classes. Then most icons are displayed as expected.
The snippet below illustrates how to use both libraries. Whenever a FA4 class is used, it's rendered FA4 style. Whenever a FA5 class is used, it's rendered FA5 style. If you load it the other way around (FA4 first), everything is rendered FA5 style and that doesn't work if you have FA4 icon definitions that are now in the FA5 brand subset (fab).
If you swap the loading of the libraries (load FA5 first), it works.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>Facebook à la 4.7</label>
<i class="fa fa-facebook"></i>
<br>
<label>Facebook à la 5</label>
<i class="fab fa-facebook"></i>
You can actually make them work together, however, you will have to edit the CSS for one of them and give every icon a new non-conflicting CSS name.
Step 1: Install both libraries locally.
Install each in separate directories and name one fa4 and one fa5 (or whatever you want to call the directories so you can tell them apart). You cannot use the CDN for this to work.
Step 2: Edit ONE version of Font Awesome
Pick which version of Font Awesome you want to edit. In my case, I was already using version 4, so I decided to edit version 5.
Change every instance of .fa to .fa5 in the CSS... EXCEPT for the font file names.
Example:
.fa-xs {
font-size: .75em; }
becomes
.fa5-xs {
font-size: .75em; }
Example 2:
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1; }
becomes
.fa5,
.fas,
.far,
.fal,
.fad,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1; }
WARNING: DO NOT CHANGE REFERENCES TO THE FONT FILES!
Leave these unchanged, even though they have fa in the name.
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
#font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
You have to reference the actual file name, and it does not matter what the name of the file is since they are in different directories.
Step 3: Add the CSS links to your head section
<head>
...
<link href="fa/css/font-awesome.css" rel="stylesheet"> <!-- load all FA4 styles -->
<link href="fa5/css/all.css" rel="stylesheet"> <!-- load all FA5 styles -->
...
</head>
Step 4: Call the Icons like Normal
One way of calling it looks like this:
<i class="fa fa-chart-bar-o"></i> <!-- Font Awesome 4 Version of Chart -->
<i class="fa5 fa5-chart-bar"></i> <!-- Font Awesome 5 Version of Chart -->
<i class="fab fa5-cc-discover"></i> <!-- Font Awesome 5 Brand Icon for Discover -->
Notice you have to use fab for the brand icons.
If you do it this way, you have no conflicts at all and can use the entire library for both sets.
Unfortunately I don't have good advice on how to make them work in parallel - it feels like a can of worms, I would try to avoid such situations. You are saying "my plugin" - does that mean you developed it? If I had control over the code and I knew it might be used in both environments, I would add a config-option to select FA4- or FA5-environment and would then create the appropriate tags.
WRT first icon not showing in your sample: you said that you noticed the reverse effect if you loaded scripts in reverse order. And there lies your answer already: both .css-files have different definitions for the .fa-class. I guess the one which ruins your sample is this (from https://use.fontawesome.com/releases/v5.0.8/css/all.css:
.fa,.far,.fas{
font-family: Font Awesome\ 5 Free;
}
as opposed to this (fromFA4):
.fa{
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;
}
Okay I struggled with this for some time and stumbled on this article, but the easiest solution is to just paste an SVG into the project like so: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tiktok" viewbox="0 0 16 16"> <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"></path> </svg>
I placed it within my font awesome tags so it's styled similar
Related
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.
Please go here end see Black font style. How do I get this style on my page. Here is what I've tried so far, but it's not working.
.title{
font-family:'montserrat' sans-serif;
font-weight:900;
font-weight:Black;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class='title'>LOREM</div>
First, the font-family property requires values to be separated by a comma. Also, you should use the capital letter in the value.
Therefore, this…
font-family: 'montserrat' sans-serif;
…should be
font-family: 'Montserrat', sans-serif;
To add more weights to your font, use the customize menu:
Then, simply add the corresponding font-weight or font-style value:
font-weight: 900;
If you don't have that weight specified in your generated <link>, then the fallback family and weight will be used.
There are several variants based on which you can import the fonts. For Montserrat, there are Regular 400, Bold 700, Black 900 and many more. Just select the variant type and add that font, now you are good to go.
Based on your question the URL you need is
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
First use 'Montserrat', sans-serif; (with ,)
Second font-weight:black; is invalid so remove it...
You can use font-style:normal
.title{
font-family:'Montserrat', sans-serif;
font-weight:900;
font-style:normal;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
<div class='title'>black</div>
I am builting a website using font-awesome icons and I noticed that the font-family changes when I use an icon.
I've read online about pseudo elements, but yet can't figure it out.
Is there any way (example of code), that I can use so as to inherit the same font-family which is used in the webiste, after using a font awesome icon?
Many thanks!
<script src="https://use.fontawesome.com/cce2885033.js"></script>
<br><i class="fa fa-check"> If the athlete does not have time and has to eat 1 hour before the game, 70g are usually enough.</i><br>
Font-Awesome applies its own font family. Use it like this:
<i class="fa fa-check"></i><p style="font-family:'yourfont';">TEXT</p>
OR use pseudo element ::before in css to apply font-awesome icon to the left(before) of your text without icon tag:
p::before {
font-family: "Font Awesome\ 5 Free";
display: inline-block;
padding-right: 3px;
font-weight: 900;
content: "\f00c";
}
You might do it setting several font names to font-family property:
i.fa {font-family: "FontAwesome", "Lobster", sans-serif}
<script src="https://use.fontawesome.com/cce2885033.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<br><i class="fa fa-check"> If the athlete does not have time and has to eat 1 hour before the game, 70g are usually enough.</i><br>
The three horizontal lines of the hamburger icon render as "X" on a few mobile phones. In other mobile phones and desktop the hamburger icon renders correctly as three horizontal lines. To be more specific it is on all XIAOMI mobile phones on all browsers.
The <Head> code is
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
And the <Body> code is
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰Menu</div>
<div class="site-name">ABCD</div>
I had to insert an ugly text "MENU".
Snapshot attached.enter image description here
The symbol you're seeing - which looks a bit like an X in a box - is the Android symbol for "I can't find this character in my built in fonts."
You need to provide a font - or Icon Font - for that specific character (U+2630).
As for why Xiaomi doesn't support that... It might be because ☰ is the Chinese "trigram for heaven" symbol. They might not have included Chinese fonts on a non-Chinese phone.
You could instead draw the icon with CSS instead of hoping that each client has the font.
.hamburger {
display: inline-block;
}
.hamburger span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
}
<div role="button" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
If you're Client doesnt have a certain Font, there are certain ways to fix it:
Use a font CDN my prefered choice to use Font-Awesome
Deliver Font on Request
Use a font CDN
As this method is more suitable, as you are not trying to include a random font, but you want to use a font to display Icons. I suggest you to use FontAwesome. It only provides many more fun and free icons to use.
Just include it as descriped in their start page:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
To use the Hamburger Icon, just do it like this:
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger"><i class="fas fa-bars"></i><span>Menu</span></div>
<div class="site-name">ABCD</div>
The <i class="fas fa-bars"></i> Part includes the Icon. The fa-bars class is used to reference the specific FontAwesome Icon. For example change it to fa-caret-down to see this icon.
Note that im not sure, if your hamburger css class is needed anymore, as you haven't shared its code yet. Just being said, that this solution will include the icon without any more css.
Deliver Font on Request
Just Upload your font to the wwwroot/font folder and link it in your css:
/*default version*/
#font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font.eot');
src:
local('Lovely Font'),
local('Lovely-Font'),
url('fonts/lovely_font.otf')
format('opentype');
}
/*bold version*/
#font-face {
font-family: 'lovelyFont';
src: url('fonts/lovely_font_bold.eot');
src:
local('Lovely Font Bold'),
local('Lovely-Font-Bold'),
url('fonts/lovely_font_bold.otf')
format('opentype');
font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }
be sure to check out the link for this one.
Summary
I'd clearly go with the CDN / FontAwesome Approach, as it provides much more usability. Browse for any Icon you'd like and just easily include it. On the other hand, it also adds a new dependency to your project, which is not alaways a desired choice.
If so use the approach to Deliver your own font. Make sure it contains the Icons you need and you're good to go. This solution would be best to use, if you really needed to provide your very own font. It could also be containing a simplified version of your companys logo or whatever.
I hope this clears things up for you. If you're interested in why your current solution doesn't work have a look at terence eden's Answer.
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.