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.
Related
I am trying to use tag icon in the html but it's not showing the icon.
This is how I am trying to display the icon but it's not displaying the icon
<i class="fas fa-plus"></i>
But whereas if I use icon like below it's displaying the icon
<fa-icon [icon]="['fas','plus']"></fa-icon>
But I need to display Icon as in the below type in order to do my logics.
<i class="fas fa-plus"></i>
Any Help, Thanks!
You need to make sure that the font awesome library is properly loaded on the page. If you are using the Angular CLI, you can add the following line to the section of your HTML file:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Once the library is loaded and available, you can use the tag to display the icon.
You must be missing an link tag in the header of the index.html. Also try to use:
<i class="fa fa-plus"></i>
When I'v tried to use the i tag for icons, i noticed the "fas" was not working for me. I had to remove the "s"
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>
I would like to use Font Awesome´s Facebook icon, but I have difficulty in adjusting colors properly. My webpage background color is grey, and I would like to have an icon with mixture of white & blue, but extent of colors doesn´t adjust properly. Following is my HTML code:
<a class="list-group-item" href="https://www.facebook.com/pages/Scientific-Editing-and-Proofreading/726988900763622" target="_blank"><i class="fa fa fa-facebook-square fa-5x fa-cog-fa"></i></a>
And following is my css:
.fa-cog-fa {
color: white;
background-color:blue;
}
And you can see the final look under following link:
this is how my code at the end appear
As you see, blue color is so extent such that crosses borders of white color. How can I fix this issue?
You can stack multiple FontAwesome icons together, and with CSS, add in some extra formatting. fa-square and fa-facebook can combine well together, though you'll have to fiddle around with alignment and positioning to get it just right.
Basic markup for a stack:
<span class="fa-stack fa-5x">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
Documentation: http://fortawesome.github.io/Font-Awesome/examples/
Demo with colors, sloppily aligned: http://codepen.io/blindingstars/pen/WvVevE
That's because it's how the font is set. You can use the other facebook font <i class="fa fa-facebook'></i> that FontAwesome has and then manipulate it with CSS to look something similar. Here's a fiddle example. http://jsfiddle.net/q1pL3bop/1/
Font Awesome Pro 5 now has DUOTONES, and this would always be the preferable way to use two colors in a icon.
Official Resource Link: https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons
<div class="fa-3x">
<i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i> <!-- primary layer color defined -->
<i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- primary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i> <!-- secondary layer color defined -->
<i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- secondary layer color defined -->
<i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
<i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- secondary + primary layer color defined -->
</div>
You can't, easily. Fontawesome (or any font for that matter) has only two "colors": the foreground color and transparent. Using fonts with multiple colors requires some kind of overlay technique (I.e. Putting two icons on top of each other), which may be tricky to get right.
If you want color, stick with SVG, or even PNG.
I would recommend using Font Awesome's SVG to get the effect that you're looking for. With using a "font" the pseudo element ::before extends past the element itself. When using an SVG it fits the element perfectly.
You can find out more information on this at: https://css-tricks.com/icon-fonts-vs-svg/
I'am using Font Awesone like this:
<link href=".../css/font-awesome.min.css" rel="stylesheet" type="text/css">
and
<span class="fa-stack fa-lg myownclass">
It works in IE, Chrome and Firefox - und sometimes in Opera. Now my customer told me, that he also not see the Icon on Firefox/Windows.
Do you have an idea what's the problem? Opera sometimes shows me the Icons, sometimes only rectangles or numbers.
Can you help me? Could it be a problem of caching?
All Font-Awesome icons need to be given the fa class in order to properly assign the Font-Awesome font:
<span class="fa fa-stack fa-lg myownclass">
^^
Unless this is being defined in your .myownclass class, the Font-Awesome font will not be active.
You have to add following on your html, head'
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">
First of all: checkout #James Donnely's answer: you definitely should add the fa class.
When you only see rectangles etc. it means that the browser didn't load the font file (considering sometimes you do actually see the fa-icons), and it's showing unknown character files (unicode characters like \f16c) as squares or something else, designating it doesn't know what the heck to do with those characters.
So whenever this happens open up a developer tools screen and check if you see any errors. Furthermore, be sure the font file is loaded from a stable server. Also, if you load the font-file from a relative path, it could be the case that on certain pages (eg. /blog/an-article) it can't find the file, while on others (/blog) the relative path is indeed correct.
thanks for your answers.
I changed the code to:
<span class="fa fa-stack fa-lg myclass">
<i class="fa fa-circle fa-stack-2x">
<i class="fa fa-facebook fa-stack-1x fa-inverse">
</span>
But there ar no changes, I cant understand. Perhaps it is realy only a problem of loading local the data. I give up for now.
I'm using FontAwesome via their CDN:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
But I cannot get the icons to render anything larger than icon-large, so this:
<i class="icon-laptop icon-4x"></i>
Renders as the default tiny icon. I have no other code impeding it, and can't figure out why its not working. If I do this:
<i class="icon-laptop icon-large"></i>
I get the large icon, but I want the HUGE icon! Help!
I think your question should be : "How to change the size of a stack of icons".
The thing is, if you want to change the size of a stack of icons, you have to add the "icon-4x" class to the stack and not to the icons directly.
For example :
<span class="icon-stack icon-4x">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-laptop"></i>
</span>