I have the font awesome 6.0 Pro version. But the problem is, Duotone icon layer position is not setting properly. Look at my approach and screenshot.
<style type="text/css">
.fa-duotone{
font-size:30px;
text-align:center;}
</style>
<i class="fa-duotone fa-crow" style="--fa-secondary-opacity: 1.0; --fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
<i class="fa-duotone fa-campfire" style="--fa-secondary-opacity: 1.0; --fa-primary-color: sienna; --fa-secondary-color: red;"></i>
Look at the Screenshot:
Font Awesome Duotone Icon Layer Problem
How Can I Fix It......?
Related
I am using Bulma css framework with custom font Comfortaa from https://fonts.google.com/specimen/Comfortaa
But the font has some extra space at bottom and it makes all text of elements to be little higher than it should be.
On img: 1) comfortaa 2) roboto 3) Segoe UI (with button and h1 with border)
see comparision img
How to make text of elements with Comfortaa font on same level as others ?
Preferably in Bulma. Thank you.
You could add extra padding to the text container to push it down a little. You'll need to tweak the amount of padding to suit. Below is an example of how that could work. I have created a class .text-offset that pushes the text down 1px with padding-top.
The whitespace you have outlined in your image is the fonts line height, it is different from font to font. Apparently, some web fonts try to balance the top and bottom spacing out for this reason.
body {
font-family: 'Comfortaa', cursive;
padding: 20px;
}
.text-offset {
padding-top: 1px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<a class="button is-primary">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
<span class="text-offset">GitHub</span>
</a>
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'm trying to add Material.io icon to a button using ::before, but it only displays the icon filled.
There are no guides about how to set the icon outlined.
This is my code:
.view-site:before{
content: "\E8F4";
font-family: 'Material Icons';
}
How do i display the outlined icon?
Google claim the new themes feature weeks ago but apparently there's no clue on how to use outlined, sharp, rounded and two tone icons.
I believe the only reference we got is here:
https://github.com/google/material-design-icons/issues/773
I believe you missed the dot before the CSS rule. Here is the fixed solution:
.view-site:before {
content: "\E8F4";
font-family: 'Material Icons';
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="view-site">
</i>
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.