How can I make Material Icons rounded using Icon Font? [duplicate] - html
Google has revamped its Material Design Icons with 4 new preset themes:
Outlined, Rounded, Two-Tone and Sharp, in addition to the regular Filled/Baseline theme:
But, unfortunately, it doesn't say anywhere how to use the new themes.
I've been using it via Google Web Fonts by including the link:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
And then using the required icon as suggested in the documentation:
<i class="material-icons">account_balance</i>
But it always shows the 'Filled/Baseline' version.
I've tried doing the following to use the Outlined theme instead:
<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>
and, changing the Web Fonts link to:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">
etc. But it doesn't work.
And there's no point in taking shots in the dark like that.
tl;dr: Has anyone tried using the new themes? Does it even work like the baseline version (inline html tag)? Or, is it only meant to be downloaded as SVG or PNG formats?
Update (31/03/2019) : All icon themes work via Google Web Fonts now.
As pointed out by Edric, it's just a matter of adding the google web fonts link in your document's head now, like so:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
And then adding the correct class to output the icon of a particular theme.
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
The color of the icons can be changed using CSS as well.
Note: the Two-tone theme icons are a bit glitchy at present.
Update (14/11/2018) : List of 16 outline icons that work with the "_outline" suffix.
Here's the most recent list of 16 outline icons that work with the regular Material-icons Webfont, using the _outline suffix (tested and confirmed).
(As found on the material-design-icons github page. Search for: "_outline_24px.svg")
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
Note that pie_chart needs to be "pie_chart_outlined" and not outline.
This is a hack to test out the new icon themes using an inline tag. It's not the official solution.
As of today (July 19, 2018), a little over 2 months since the new icons themes were introduced, there is No Way to include these icons using an inline tag <i class="material-icons"></i>.
+Martin has pointed out that there's an issue raised on Github regarding the same: https://github.com/google/material-design-icons/issues/773
So, until Google comes up with a solution for this, I've started using a hack to include these new icon themes in my development environment before downloading the appropriate icons as SVG or PNG. And I thought I'd share it with you all.
IMPORTANT: Do not use this on a production environment as each of the included CSS files from Google are over 1MB in size.
Google uses these stylesheets to showcase the icons on their demo page:
Outline:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Rounded:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
Two-Tone:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
Sharp:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
Each of these files contain the icons of the respective themes included as background-images (Base64 image-data). And here's how we can use this to test out the compatibility of a particular icon in our design before downloading it for use in the production environment.
STEP 1:
Include the stylesheet of the theme that you want to use.
Eg: For the 'Outlined' theme, use the stylesheet for 'outline.css'
STEP 2:
Add the following classes to your own stylesheet:
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
STEP 3:
Use the icon by adding the following classes to the <i> tag:
material-icons-new class
Icon name as shown on the material icons demo page, prefixed with the theme name followed by a hyphen.
Prefixes:
Outlined: outline-
Rounded: round-
Two-Tone: twotone-
Sharp: sharp-
Eg (for 'announcement' icon):
outline-announcement, round-announcement, twotone-announcement, sharp-announcement
3) Use an optional 3rd class icon-white for inverting the color from black to white (for dark backgrounds)
Changing icon size:
Since this is a background-image and not a font-icon, use the height and width properties of CSS to modify the size of the icons. The default is set to 24px in the material-icons-new class.
Example:
Case I: For the Outlined Theme of the account_circle icon:
Include the stylesheet:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Add the icon tag on your page:
<i class="material-icons-new outline-account_circle"></i>
Optional (For dark backgrounds):
<i class="material-icons-new outline-account_circle icon-white"></i>
Case II: For the Sharp Theme of the assessment icon:
Include the stylesheet:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
Add the icon tag on your page:
<i class="material-icons-new sharp-assessment"></i>
(For dark backgrounds):
<i class="material-icons-new sharp-assessment icon-white"></i>
I can't stress enough that this is NOT THE RIGHT WAY to include the icons on your production environment. But if you have to scan through multiple icons on your in-development page, it does make the icon inclusion pretty easy and saves a lot of time.
Downloading the icon as SVG or PNG sure is a better option when it comes to site-speed optimization, but font-icons are a time-saver when it comes to the prototyping phase and checking if a particular icon goes with your design, etc.
I will update this post if and when Google comes up with a solution for this issue that does not involve downloading an icon for usage.
For angular material you should use fontSet input to change the font family:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />
<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...
As of 27 February 2019, there are CSS fonts for the new Material Icon themes.
However, you have to create CSS classes to use the fonts.
The font families are as follows:
Material Icons Outlined - Outlined icons
Material Icons Two Tone - Two-tone icons
Material Icons Round - Rounded icons
Material Icons Sharp - Sharp icons
See the code sample below for an example:
body {
font-family: Roboto, sans-serif;
}
.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.material-icons-outlined,
.material-icons.material-icons--outlined {
font-family: 'Material Icons Outlined';
}
.material-icons-two-tone,
.material-icons.material-icons--two-tone {
font-family: 'Material Icons Two Tone';
}
.material-icons-round,
.material-icons.material-icons--round {
font-family: 'Material Icons Round';
}
.material-icons-sharp,
.material-icons.material-icons--sharp {
font-family: 'Material Icons Sharp';
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="original">
<h2>Baseline</h2>
<i class="material-icons">home</i>
<i class="material-icons">assignment</i>
</section>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons-outlined">home</i>
<i class="material-icons material-icons--outlined">assignment</i>
</section>
<section id="two-tone">
<h2>Two tone</h2>
<i class="material-icons-two-tone">home</i>
<i class="material-icons material-icons--two-tone">assignment</i>
</section>
<section id="rounded">
<h2>Rounded</h2>
<i class="material-icons-round">home</i>
<i class="material-icons material-icons--round">assignment</i>
</section>
<section id="sharp">
<h2>Sharp</h2>
<i class="material-icons-sharp">home</i>
<i class="material-icons material-icons--sharp">assignment</i>
</section>
</body>
</html>
Or view it on Codepen
EDIT: As of 10 March 2019, it appears that there are now classes for the new font icons:
body {
font-family: Roboto, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="original">
<h2>Baseline</h2>
<i class="material-icons">home</i>
<i class="material-icons">assignment</i>
</section>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons-outlined">home</i>
<i class="material-icons-outlined">assignment</i>
</section>
<section id="two-tone">
<h2>Two tone</h2>
<i class="material-icons-two-tone">home</i>
<i class="material-icons-two-tone">assignment</i>
</section>
<section id="rounded">
<h2>Rounded</h2>
<i class="material-icons-round">home</i>
<i class="material-icons-round">assignment</i>
</section>
<section id="sharp">
<h2>Sharp</h2>
<i class="material-icons-sharp">home</i>
<i class="material-icons-sharp">assignment</i>
</section>
</body>
</html>
EDIT #2: Here's a workaround to tint two-tone icons by using CSS image filters (code adapted from this comment):
body {
font-family: Roboto, sans-serif;
}
.material-icons-two-tone {
filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
font-size: 48px;
}
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
color: #0099ff;
font-size: 48px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="original">
<h2>Baseline</h2>
<i class="material-icons">home</i>
<i class="material-icons">assignment</i>
</section>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons-outlined">home</i>
<i class="material-icons-outlined">assignment</i>
</section>
<section id="two-tone">
<h2>Two tone</h2>
<i class="material-icons-two-tone">home</i>
<i class="material-icons-two-tone">assignment</i>
</section>
<section id="rounded">
<h2>Rounded</h2>
<i class="material-icons-round">home</i>
<i class="material-icons-round">assignment</i>
</section>
<section id="sharp">
<h2>Sharp</h2>
<i class="material-icons-sharp">home</i>
<i class="material-icons-sharp">assignment</i>
</section>
</body>
</html>
Or view it on Codepen
As of 12/05/2020, You need to
1. include CSS:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
2. Use it like this:
<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>
Note: For example, to use outlined style, You need to specify material-icons AND material-icons-outlined classes.
If you already have material-icons working in your web project, just need to update your reference in the html file and the used class for icons:
html reference:
Before
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
After
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />
material icons class:
After that just check wich className are you using:
Before:
<i className="material-icons">weekend</i>
After:
<i className="material-icons-outlined">weekend</i>
that works for me... Pura vida!
What worked for me is using _outline not _outlined after the icon name.
<mat-icon>info</mat-icon>
vs
<mat-icon>info_outline</mat-icon>
The webfonts link works now, in all browsers!
Simply add your themes to the font link separated by a pipe (|), like this
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
Then reference the class, like this:
// class="material-icons" or class="material-icons-outlined"
<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>
This pattern will also work with Angular Material:
<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
None of the answers so far explains how to download the various variants of that font so that you can serve them from your own website (WWW server).
While this might seem like a minor issue from the technical perspective, it is a big issue from the legal perspective, at least if you intend to present your pages to any EU citizen (or even, if you do that by accident). This is even true for companies which reside in the US (or any country outside the EU).
If anybody is interested why this is, I'll update this answer and give some more details here, but at the moment, I don't want to waste too much space off-topic.
Having said this:
I've downloaded all versions (regular, outlined, rounded, sharp, two-tone) of that font following two very easy steps (it was #Aj334's answer to his own question which put me on the right track) (example: "outlined" variant):
Get the CSS from the Google CDN by directly letting your browser
fetch the CSS URL, i.e. copy the following URL into your browser's
location bar:
https://fonts.googleapis.com/css?family=Material+Icons+Outlined
This will return a page which looks like this (at least in Firefox 70.0.1 at the time of writing this):
/* fallback */
#font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
Find the line starting with src: in the above code, and let your browser fetch the URL contained in that line, i.e. copy the following URL into your browser's location bar:
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
Now the browser will download that .woff2 file and offer to save it locally (at least, Firefox did).
Two final remarks:
Of course, you can download the other variants of that font using the same method. In the first step, just replace the character sequence Outlined in the URL by the character sequences Round (yes, really, although here it's called "Rounded" in the left navigation menu), Sharp or Two+Tone, respectively. The result page will look nearly the same each time, but the URL in the src: line of course is different for each variant.
Finally, in step 1, you even can use that URL:
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp
This will return the CSS for all variants in one page, which then contains five src: lines, each one with another URL designating where the respective font is located.
New themes are probably not (yet?) part of the Material Icons font. Link.
The Aj334's recent edit works perfectly.
google CDN
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Icon Element
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
I was unsatisfied that until know Google hasn't yet released their new designs as font or svg icon set. Therefore I put together a small npm package to solve the problem.
https://www.npmjs.com/package/ts-material-icons-svg
Simply import the icons you wanna use and add them to your registry. This also supports tree shaking since only those icons are added to your project that you really want and/or need.
npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git
to use two tone icons for example
import {icon_edit} from 'ts-material-icons-svg/dist/twotone';
matIconRegistry.addSvgIcon(
'edit',
domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
);
In your html template you now can use the new icon
<mat-icon svgIcon="edit"></mat-icon>
Put in head link to google styles
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
and in body something like this
<i class="material-icons-outlined">bookmarks</i>
Setting up the Two-tone color:
As described above you can use the color css key except for materials Two-tone theme which seems to be glitchy ;-)
A workaround is described in one of several angular material github issue's by using a custom css filter. This custom filter can be generated here.
E.g.:
Html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">
<i class="material-icons-two-tone red">home</i>
css:
.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}
Attachments:
Working Angular Stackblitz
Codepen example
Codepen CSS filter Generator
I ended up using IcoMoon app to create a custom font using only the new themed icons I required for a recent web app build. It's not perfect but you can mimic the existing Google Font functionality pretty nicely with a little bit of setup. Here's a writeup:
https://medium.com/#leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2
If someone is feeling daring, they could convert the entire theme using IcoMoon. Hell, IcoMoon probably has an internal process that would make it easy since they already have the original Material Icons set in their library.
Anyway, this isn't a perfect solution, but it worked for me.
Somewhat hilariously, Google has made a font that works correctly in Safari but not in Chrome. Here's the https://codepen.io/anon/pen/zbavza
<i class="material-icons-round red">warning</i>
In reference to https://stackoverflow.com/a/54902967/4740291 and not being able to change the color using css.
For Angular users (tested on v14):
If you want to change the globally used theme of icons to e.g. outlined, you can do this in your AppModule or wherever you need it:
export class AppModule {
constructor(private readonly iconRegistry: MatIconRegistry) {
const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
const outlinedFontSetClasses = defaultFontSetClasses
.filter(fontSetClass => fontSetClass !== 'material-icons')
.concat(['material-icons-outlined']);
iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
}
}
defaultFontSetClasses also includes mat-ligature-font class name, which you need to keep in order to render the icons properly if you're using [fontIcon] property binding in your <mat-icon> elements.
also, remember to load the Material Icons Outlined stylesheet:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
per https://material.angular.io/components/icon/api#MatIconRegistry
Related
Adding a twitter icon in html page
How to generate the twitter , facebook and youtube icon as in the top of the website https://store.linefriends.com/ If I inspect the element I see the following html : <li></li> Not sure how that icon gets generated from this html line as there is no image etc here
Such icons can be generated using an icon library. The most popular choice is FontAwesome. If you want to add links, you can enclose i tag with an anchor tag, with href attribute. You need to add a bit of styling to it. a{ color: black; text-decoration: none; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="container"> <span><i class="fab fa-twitter"></i></span> <span><i class="fab fa-facebook-f"></i></span> <span><i class="fab fa-youtube"></i></span> <span><i class="fab fa-instagram"></i></span> </div> You can get the code for link tag from cdnjs You can search for all icons on their website You can also download icons and use img tag, but using an icon library, makes things a lot easier.
You use a font family ("Turbo" as I can see) that contains web icons inside. The icon is generated from the class icon-twitter. Inside this <a> element there is a .icon-twitter::before pseudo element that contains the content value content: "\ea96";. This value is being interpreted to this icon. So, if you want to change this icon you have to remove the icon-twitter class and put an <img> element with your custom image file ( I would recommend to be an svg file for better load time performance ).
you will need to check each css file found in inspect element via view source for class icon-twitter. (with code like ) Or Use font awesome for this. More details are available on https://fontawesome.com/ Fon awesome alternatives are available on https://www.google.com/amp/s/www.hongkiat.com/blog/free-font-icons-to-bookmark/amp/ OR https://alternative.me/font-awesome Or You can use images to achievs this with tag
why some of the font-awesome icons does not show
I am using font-awesome with Angular 5 for my UI. Since I am using sass, I added the following line in .angular-cli.json after installing font-awesome "styles": [ "../node_modules/font-awesome/scss/font-awesome.scss", "../node_modules/bootstrap/scss/bootstrap.scss", "styles.scss" ], Some of the icons works such as <i class="fa fa-money blue-text"></i> <i class="fa fa-code blue-text"></i> However a lot more does not. For example, I wanted to use this bar chart icon with fas fa-chart-bar, but it does not show anything. Things like fas fa-camera-retro only shows as a weird square instead of the actual icon. Why some of the icons don't work? Is there way to check if these css classes exist in the font-awesome package I installed? EDIT Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me That was changed with the release of FA5, because now there are multiple styles for the icons: fas: FontAwesome solid far: FontAwesome regular fab: FontAwesome brands fal: FontAwesome light However, FontAwesome5 free has solid only for most icons. For the full experience, you'd have to pay for FontAwesome Pro. Select any icon in the gallery, to see wich styles are available for it in which release. NB: FA4-icons here.
Worked for me after upgrading to the latest version of Font Awesome: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
You may not use the V5-release of FontAwesome. Just use the latest version of FontAwesome 4, it should work. Use this link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
I had the same issue. The search page for icons I found with Google was outdated. Make sure you are searching on the last version of the site. Like you, I found this icon : <i class="fa fa-line-chart"></I> It was not working. If you search on the website, you will see it is : <i class="fas fa-chart-line"></i>
I had to do this one time. I think some mobile devices didn't load one of the fonts: font-family: "Font Awesome 5 Free", "FontAwesome";
the syntax that worked for me is fas fa-chart-bar https://fontawesome.com/icons/chart-bar?style=solid this is with the following versions: bootstrap/4.4.1/css/bootstrap.min.css font-awesome/4.7.0/css/font-awesome.min.css
Have Two Font Awesome Icons in One i Tag
I've been scouring the web, and I can't find an answer to this. Is there away to add two Font Awesome icons in one i tag? I can do it if I put two i tags side by side, like this: Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i> So is there anyway to do this?
Glyph-based fonts like this generally function by changing the content of the element to a specific value, which the font picks up and renders as the appropriate glyph. So it's unlikely that you'll be able to use a single tag to display both of them unless the library provides specific syntax for handling that behavior on it's own (similar to how Font Awesome uses stacking).
This is not possible in a single <i> tag, reason is the way how the glyph identifying classes are applied. For longer or dynamic sequences you can however directly use the icons codes in markup notation: html: <span class="font-awesome"></span> css: .font-awesome { font-family: FontAwesome; } This obviously requires that you load the font as FontAwesome. I created a fiddler as simple demonstration: https://jsfiddle.net/6ofmn36g/ I do agree though that this is an approach that is somewhat hard to read, though...
With Font Awesome 5, it's possible! Masking Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects. Go through the Masking section in this link. The below snippet is a small working example taken from their site <!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file --> <script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> <div class="fa-4x"> <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i> <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i> <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i> </div>
Not possible with current library of FontAwesome. But there are work arounds as arkascha has suggested below. Additional Info: Not exactly what you are asking for But I think this will help you, Also future crowd who falls into this thread with the title. I had answered similar stuff... Here https://stackoverflow.com/a/36491858/2592042 You can also build a custom icon by using set of icons available in the font-awesome icon set by stacking and aligning them accordingly. Stacked Icons Example: <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> <span class="fa-stack fa-lg"> <i class="fa fa-male fa-stack-1x"></i> <i class="fa fa-female fa-stack"></i> </span>
Font Awesome Shortcut
I am using Awesome Font in my web project. Is there any option how to make shortcut to bunch of icons? E.g. I have circle-thin icon. Now on page I want to put three icons together so the result is OOO, but I do not want to put 3x times <i class="fa fa-circle-thin"></i> s in the code. So can I somehow create CSS shortcut when I write it, 3 circles will appear? Example: .circle-three { <i class="fa fa-circle-thin"></i> <i class="fa fa-circle-thin"></i> <i class="fa fa-circle-thin"></i> } Then on page I would use only .circle_three class instead of typing the code for circle three times.
It is possible by both adding a new class and creating a rule that inherits everything and only adds the changes you want to, and by creating a brand new class that will substitute the original one completely. Since the only attribute in the FontAwesome CSS for fa-circle-thin is the content of the before pseudo-element, and hence there is nothing else to inherit, in this case both solutions (appended class or new class ) have the same behavior / meaning. .fa-circle-thin.triple::before { content: "\f1db\f1db\f1db"; } <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> Standard : <i class="fa fa-circle-thin"></i> Triple : <i class="fa fa-circle-thin triple"></i>
If you check the CSS file included with Font Awesome, you'll find this rule: .fa-circle-thin:before { content: "\f1db"; } So, you can make a similar rule to achieve what you want: .fa-circle-three:before { content: "\f1db \f1db \f1db"; } Check this pen for an working example.
Font awesome is not showing icon
I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code: <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> </body> </html> I would like to know how to make the icon display instead of the bordered square box.
In my case i made the following mistake in my css code. *{ font-family: 'Open Sans', sans-serif !important; } This will override all font family rules for the entire page. My solution was to move the code to body like so. body{ font-family: 'Open Sans', sans-serif; } NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.
When you open font-awesome.min.css you can see following path: 'Fonts/fontawesome-webfont.ttf?v=4.2.0' ... It means that you have to create directory Fonts and then copy files fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) to this folder. After that everything should work fine.
Be aware that the new version (5) of font awesome uses "fas" or "fab" instead of "fa" prefix. Quoted from their website: The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. This is why my fonts were showing blank squares. Now fixed. Example code: <a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a> See: https://fontawesome.com/icons/facebook-f?style=brands
First, check that you have class="fa" as well as whatever the icon's class is. So, not just <i class="fa-pencil" title="Edit"></i> But also <i class="fa fa-pencil" title="Edit"></i> Then it works as expected. This solved my issue.
Open your font-awesome.css theres code like : #font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } you must have folder like : font awesome -> css -> fonts or the easiest way : <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
i was dealing with the same problem then i figured it out i have to use new version (5 and plus) use this cdn it will work. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
Check that the path to your CSS file is correct. Rather prefer absolute links, they are easier to understand since we know where we start from and search engines will also prefer them over relative links. And to reduce bandwidth rather use the link from font-awesome servers: <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css"> Moreover if you use it, there will be no need of uploading extra fonts to your server and you will be sure that you point to the right CSS file, and you will also benefit from the latest updates instantly.
I'm using FontAwesome Pro, and the solution for me was to embed all.min.css instead of fontawesome.min.css.
i was facing the same issue.. so instead of downloading font awesome , i added a link in my html code and it worked. <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
It's something to do with v5, some of the icons don't work with older versions. This link worked for me! <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
For a start, you shouldn't have both font-awesome.css and font-awesome.min.css Generally, use font-awesome.css during development, then switch to font-awesome.min.css once you're happy with the site. Problems like this are often caused by relative paths and locations, so check where your html file is in relation to the css. If your html file is in the base directory, and the css in a subfolder off the root, you would need: href="./css/font-awesome.css" (single period)
All the above are correct however on top of that my issue was that I downloaded the free version of FA5 which doesn't have: font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0') I could not get v5 to work so I reverted to 4.7.0 with the help of the posts above and it fixed my issue.
For those of you using SCSS and the NPM package, here is my solution: npm i --save #fortawesome/fontawesome-free Then at the top of an SCSS file (ideally an SCSS file imported at the root of your application): #import '#fortawesome/fontawesome-free/css/fontawesome.css'; #import '#fortawesome/fontawesome-free/css/all.css';
In my case, I needed to combine the answers from sst & Bruno Leveque: https://fontawesome.com/download download via Free for web, unpack copy all folders into /fontawesome/ link the all.min.css instead of fontawesome.css Example Django: # in myapplication/vendor/fontawesome/ everything unpacked <link rel="stylesheet" href="{% static 'myapplication/vendor/fontawesome/css/all.min.css' %}">
I successfully installed Font Awesome using their CDN and javascript include (as described on this page). Then I tried to copy the HTML and CSS to some legacy pages and suddenly I saw empty square boxes instead of the icons. I saw Daniel's answer (above) and because my legacy CSS file was huge (and years old) I suspected that was the issue. However when I looked in Chrome DevTools it really looked like Font Awesome was loaded: I was expecting to see the font in strikeout if there was an issue... However I had really exhausted all my options so I checked the Computed Styles and saw clearly that the Font Awesome font was definitely not being used. (See the Rendered font at the bottom) My legacy CSS file was a mess and I preferred not to touch it, so I cheated by doing this - please don't tell anyone :) <a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a> Also to note, when I upgraded from Font Awesome version 4.7.0 to version 5.4.1 this issue went away! I used this setup guide and this HTML <a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
I think you have not fonts folder in your root folder like where stay css folder. Demo And css folder is like And fonts folder like I hope it will work for you. Thanks you.
In my case: You need to copy the whole font-awesome folder to your project css folder and not just the font-awesome.min.css file.
So it seems adding style='font-weight:normal;' or otherwise changing the font directly on the element overrides the .fas{font-weight:900} definition in Font Awesome's CSS file. I guess the font has specific defines within the font file that it works with. It seems the font-weight must be set between 501 and 1000, or the font may look like a square block.
In my case, the problem was caused by using some regular styles (far) that are not included in the free set. Changing to fas fixed it.
my issue was the one having most of the votes *{ font-family: xxxxx } changing it to this solved the problem body{ font-family: xxxx }
In my case, it worked by adding adding font-family, for example adding an Instagram icon, i needed to add font-family as FontAwsome: .fa-instagram:before { content: "\f16d"; font-family: "FontAwesome" !important; }
You may have used a VCS (git or somesuch) to transfer icon files to the server. git says: warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf. The file will have its original line endings in your working directory. warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot. The file will have its original line endings in your working directory. warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf. The file will have its original line endings in your working directory. warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff. The file will have its original line endings in your working directory. warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2. The file will have its original line endings in your working directory. You probably have to fix your fonts.
On MacOS Mojave, I had this problem in Safari. The font-awesome images worked in Chrome but not in Safari, so I was sure it wasn't the site. I got them to render by going to Preferences in the Safari menu, and disabling/unchecking "Prevent cross-site tracking" under the Privacy tab. Not sure why this fixed it, but it did.
Watch out for Bootstrap! Bootstrap will override .fa classes. If you're bringing in both packages separately thinking "I'll use Bootstrap for responsive block handling and Font-Awesome for icons", you need to address the .fa classes inside Bootstrap so they don't interfere with Font-Awesome's stand-alone implementation. eg: font-family 'FontAwesome' in Bootstrap will interfere with font-family 'Font Awesome 5 Free' in Font-Awesome and you will get a white box instead of the icon you want. There may be cleaner ways of handling this, but if you've gone down the checklist trying to fix the "white box" issue and still can't figure it out (like I did), this may be the answer you're looking for.
Based on the 5.10.1 version. My solution (locally): If you're using "fontawesome.css" or "fontawesome.min.css", try using "all.css" instead (located in the css folder). The "css" folder and the "webfonts" folder from the fontawesome package that you downloaded must be in the same level as each other. In my case, I already had a css folder so I just renamed the fontawesome css folder to "css-fa". With both "css-fa" and "webfonts" in my css folder, simply link it correctly in your text editor and it should work. Ex: link rel="stylesheet" href="css/css-fa/all.css"
solved changing the targetted !importantized font-family selector from * { ... } to *:not(i) { ... } (with scss preprocessor); hope u solved
The code below is font-awesome 4.70.0. To go to font-awesome 5.11.2, click here. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <i class="fa fa-camera-retro" aria-hidden="true"></i> </html>
I was following this tutorial to host Font Awesome Pro 5.13 myself. https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself For some reason I could not get <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet"> to load webfonts that in turn resulted in only squares showing up. But when I used <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script> everything started working. Both links were added in HTML <head>.
I was trying to add fa 5.0.13 to drupal 8 with scss. The styles are not included by default in the main fa.scss had to add them manually. #import "libraries/fontawesome/fa-brands"; #import "libraries/fontawesome/fa-light"; #import "libraries/fontawesome/fa-regular"; #import "libraries/fontawesome/fa-solid";