I am developing my first application at Vue and I must say that I am having a hard time finding practical examples and complete information for all the problems I am encountering.
Right now I'm trying to use an icon font that I've created with iconomoon. I've imported it into my project and I've declared it as a font-face in my style, importing the declaration of the icon I want to test with into the same style.
At first I had a webpack configuration error that I have already corrected, but when I declare my icon in my html template only a box with a border appears but the icon is not shown
Here is my template
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<img class="logo" src="../../assets/logo.png">
<i class="icon-ic-fluent-home-24-regular"></i>
and here my css
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
[![project strucutre][1]][1]
</style>
Can someone tell me what my mistake is?
Thank you very much for your time and help in advance
[![the square in the image corresponds to what it shows instead of the][1]][1]
[1]: https://i.stack.imgur.com/btYW0.png
You need to tell the icon to use the font you created:
<i class="icon icon-ic-fluent-home-24-regular"></i>
<style>
#font-face {
font-family: "icomoon";
src: url(../../icons/icomoon.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
.icon {
font-family: "icomoon"
}
.icon-ic-fluent-home-24-regular:before {
content: "\e908";
}
</style>
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
I have some flags that I save in my database, each flag has a specific icon on my page.
like:
<div class="myClass">
<i class="icon-flag1"></i>
<i class="icon-flag2"></i>
<i class="icon-flag3"></i>
</div>
Whenever the flag is on, e.g: it's '1'. I need to call the user's attention, the icon/flag will indicate that he needs to pay attention to this specific flag, by the icon and the hover pop-up I have the user will know what each icon means.
My problem is: How do I change the color of that element <i class="icon-flag1"></i> according to the database flag value ?
Or maybe is there an easier way to achieve this goal?
First of all, it's would be a good idea to create a generic class, for example .icon-flag which contains styles that will be applied to all of the icons, this way you're not repeating yourself, or using selectors like .icon-flag1, .icon-flag-2, .icon-flag-3 {}, etc. which should be used to set the individual icon (for example, a background image).
Then you'd add 'state' styles, for example .active, .inactive to change the font.
Here's an example:
// Common styles to all icons
.icon-flag {
font-size: 20px;
font-style: normal;
display: block;
}
// State styles
.icon-flag.active { color: green; }
.icon-flag.inactive { color: red; }
.icon-flag.deleted { color: grey; font-style: italic; }
// You'd do your different icon backgrounds, etc in here.
// .icon-flag-1 {}, .icon-flag-2 {}, .icon-flag-3 {}, etc...
<div id="icon-example-1">
<i class="icon-flag icon-flag-1 active">1</i>
<i class="icon-flag icon-flag-2 inactive">2</i>
<i class="icon-flag icon-flag-3 deleted">3</i>
<i class="icon-flag icon-flag-4 active">4</i>
<i class="icon-flag icon-flag-5 deleted">5</i>
</div>
Please check this code snippet which shows how you can change an icons color based on some trigger in your website or app.
For demonstration purposes, my trigger here is onMouseOver so you can see it in action, in your own app it will of course be triggered by a MySQL query, signals, or the ID of the icon as you stated.
$('#iconA').mouseover(function(){
$('#iconA').addClass('isRED');
});
$('#iconB').mouseover(function(){
$('#iconB').addClass('isGREEN');
});
$('#iconC').mouseover(function(){
$('#iconC').addClass('isBLUE');
});
.isRED { color: red; }
.isGREEN { color: green; }
.isBLUE { color: blue; }
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<div class="myClass">
<i id="iconA" class="icon-flag1">X</i>
<i id="iconB" class="icon-flag2">X</i>
<i id="iconC" class="icon-flag3">X</i>
</div>
Alternatively, or let's say additionally, you can set the color class based on the id of the icon as follows:
if( $('#iconA').hasClass('icon-flag1') )
{
$('#iconA').addClass('isRED');
} else if( $('#iconA').hasClass('icon-flag2') )
{
$('#iconA').addClass('isGREEN');
} if( $('#iconA').hasClass('icon-flag3') )
{
$('#iconA').addClass('isBLUE');
}
I have 3 font-awesome icons side-by-side in a dev tag. On mobile there were a bit too small. I put this in my code but this specific icon doesn't change size?
<i class="fa fa-heart fa-2x"></i>
And here's how they look:
CSS:
hover-info .fa .fa-heart {
font-size: 2em;
}
This is working in my browser:
.fa-heart {
font-size: 4em;
}
Maybe your reference to 'hover-info' is causing the issue.
NOTE: your 'css' file has to be loaded after fontawesome.
Another option if you don´t want to define a css class, is this way:
<font size="8"> <i class="fa fa-facebook"></i> </font>
Then it only remains to change the number of the font tag.
In my case this worked very well, I hope that in yours too.
Regards
I've imported all the font awesome css into my website using the following link code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />
And then added the icons using:
<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a>
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>
My custom CSS is:
#font-face {
font-family: 'headline_onehplhs';
src: url('fonts/HEADOH__-webfont.eot');
src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/HEADOH__-webfont.woff2') format('woff2'),
url('fonts/HEADOH__-webfont.woff') format('woff'),
url('fonts/HEADOH__-webfont.ttf') format('truetype'),
url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-image: url('../images/background.jpg');
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.heading {
background-color:#FFF;
font-family: 'headline_onehplhs';
font-size:3.5em;
margin-left:50px;
margin-top:50px;
padding:20px;
color:#000;
}
.heading span, .main span {
background-color:#FFF;
font-family: 'headline_onehplhs';
color:#999;
font-size:0.5em;
display:block;
}
.main span {
font-size:1.75em;
}
.main {
background-color:#FFF;
margin-left:50px;
margin-top:25px;
padding:20px;
text-align:justify;
}
My directory is laid out as follows:
css > font-awesome > [font awesome folders]
And the container that I'm using has the class name "main"
But the icons still display as square boxes - is there something I'm missing?
Try to use <i class="fa fa-twitter"> rather than <span class="fa fa-twitter">
On the official doc:
After you get up and running, you can place Font Awesome icons just
about anywhere with the <i> tag.
It also says:
You can place Font Awesome icons just about anywhere using the CSS
Prefix fa and the icon's name. Font Awesome is designed to be used
with inline elements (we like the <i> tag for brevity, but using a
<span> is more semantically correct).
Although it sounds like using <span> is also acceptable, but it does not work correctly in some cases, so stay with <i> is a safer plan.
Use this instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
If that fixes your problem, then you either didn't upload the fonts in the correct directory or you are referencing them incorrectly.
Here is a test showing the minimum code required to use font awesome:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
Noone has mentioned the font folder in relation to the fonts. Think like why in you have to put ../ in front of background image to let it know that the img Is not contained in the CSS folder. Check the font-awesome.css file and see where it Is referencing the fonts.
Maybe like this?
HTML link
<link href='content/css/font-awesome/css/font-awesome.css?family=font+awesome' rel='stylesheet' type='text/css'>
CSS
fa{
font-family: 'font awesome';
}
Source: similar use
http://www.google.com/fonts#QuickUsePlace:quickUse
in AspNetCore (.net 7), I had this problem showing a box instead of the fontawesome icon. I'm using NPM to gulp the package and copy to wwwroot/css/fontawesome. After adding the correct links to the _Hosts.cshtml everything looks good.
<link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/css/fontawesome/css/solid.css" rel="stylesheet" />
In development mode, I noticed 404 on the webfont files. After more research, I found that the mime types were not configured properly. Adding the following to program.cs, the problem is solved:
app.UseHttpsRedirection(); //Existing
// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".ttf"] = "font/ttf";
provider.Mappings[".woff"] = "font/woff";
provider.Mappings[".woff2"] = "font/woff2";
app.UseStaticFiles(new StaticFileOptions
{
ContentTypeProvider = provider
});
app.UseRouting(); //Existing