This question already has answers here:
How to change the inner white color of Font Awesome's exclamation triangle icon?
(2 answers)
Closed 3 years ago.
I want to set background color for a fontawesome icon :
.vert {
background: springgreen;
}
...
return '<i class="fa fa-circle-thin vert"></i>';
At runtime I get this :
So how to fill just the interior of the circle ?
You can use stacked icons.
.vert {
color: springgreen;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css">
<span class="fa-stack">
<i class="fas fa-circle vert fa-stack-2x"></i>
<i class="far fa-circle fa-stack-2x"></i>
</span>
Using Layers in Font Awesome 5
This feature requires that you use SVG + JS version of Font Awesome 5.
.vert {
color: greenyellow;
}
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" data-search-pseudo-elements></script>
<div class="fa-4x">
<span class="fa-layers fa-fw">
<i class="fas fa-circle vert" ></i>
<i class="far fa-circle"></i>
</span>
</div>
You can change the colour of the font-awesome icon by using color: springgreen;
In addition you will want to use a solid icon such as this https://fontawesome.com/icons/circle?style=solid
.vert {
color: springgreen;
}
...
return '<i class="fas fa-circle vert"></i>';
If you need to fill the entire icon with spring green. Then use Border-radius.
Example:-
.vert {
color: springgreen;
}
Or if you want to color only on the border. You can use the color property as depicted in the above answers.
font-awesome V5
This example describes exactly the version you are using.
.vert {
color: springgreen;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<span class="fa-stack">
<i class="fas fa-circle vert fa-stack-2x"></i>
<i class="far fa-circle fa-stack-2x"></i>
</span>
Here is codepen to describe your concern "Something wrong because interacting with bootstrap".
Related
Hello how I can change size fa fa-instagram on wordpress website?
Use this code <i class="fa fa-instagram fa-10x"></i>
If you cant edit the code, then use CSS
.fa.fa-instagram { font-size: 10em; }
You can write normal CSS as you do for other class
.fa-instagram{
font-size:20px;
}
I added the following style to the code below :
style="display: inline-block; background-color: transparent; background-image: none; font-family: fontAwesome; content: "\f0c9";"
Code:
<li class="treeview">
<a href="#">
<i style="display: inline-block; background-color: transparent; background-image: none; font-family: fontAwesome; content: "\f0c9";" class="fa fa-dashboard"></i> <span>Exit</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu" id="sign_Out">
<li class="active"><i class="fa fa-circle-o"></i>Exit</li>
</ul>
</li>
The font-awesome file is defined in the css style , Why does not the icon appear?
Error in Inspect google chrome : "invalid property value" and on the content word , line is drawn
Well, you should use the following to import font awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
For more details about how to use icons check the following link:
https://www.w3schools.com/css/css_icons.asp
EDIT:
in 4.7 version a circle appear, however moving to 5.7 version made the circle disappear so you should be careful what version you using
"\f0c9" is breaking the inline style declaration since it is already wrapped in double quotes. Using '\f0c9' should help.
I need font awesome much thicker. Trying to increase only height for default icons. Something like that as in picture for icon
<i class="fa fa-exchange" aria-hidden="true"></i>
I already try all bold property's and font awesome classes like fa-4x or fa-5x these are not suitable for me. And height property of css not work.
How to increase height of font awesome icon?
.my-link i{
color:red;
height:50px;
}
try ccs property:
transform: scale(1, 7);
.fa { transform: scale(1,7); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
<br/><br/><br/><br/><br/><br/>
<i class="fa fa-exchange fa-5x" aria-hidden="true"></i>
you can use this css for make bold.it's work on chrome
.my-link i{
-webkit-text-stroke: 4px;
}
Is there a way to overlap two Font Awesome icons in such a way that it looks like the files icon with respect to the file icon? I don't want to stack the icons but rather have one cover like 50% of another. Thanks!
Why not just use CSS padding to offset one of the icons?
<span class="fa-stack fa-lg">
<i class="fa fa-file fa-stack-2x"></i>
<i class="fa fa-file fa-stack-2x" style="padding-left:15px;padding-top:15px;"></i>
</span>
Fiddle: http://jsfiddle.net/mwatz122/sx7fk582/
Im looking for a good font awesome icon I could use as a "Reset" button for my application.
Im currently using fa-undo which looks like this:
The problem is that I need it to have a circle around it as the other buttons in my system do ( these are standard in font awesome icons, nothing has been modified except the color )
An example of what i need (with the undo image):
Ive been reading through the list here for nearly an hour but cant think of a possible alternative. Any thoughts?
FA has some utility classes, one of which is fa-stack. You can stack fa-circle underneath fa-undo.
.fa-circle {
color: #008db8;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-undo fa-stack-1x fa-inverse"></i>
</span>