Menu
Is it possible to change the inner "i" color within <i class="fa fa-info-circle"> ?
E.g. - in this fiddler make just the "i" with red color .
683
To change the color of the icons, simply add or change the “color” property in the CSS. So to change the color of the icons to red in the above example, add “color:red” to the . searchlinks a::after pseudo element.
Select the element you want to recolor by simply clicking on it. Tip: If you want to change the color of the whole icon, you can quickly select all elements with a “Command + A” (for Mac) or “Ctrl + A” (for Windows) keyboard shortcut. Step 3 — Click on the Color Picker tool in the left-hand panel.
Instead of fa as a style preceding every icon style, you need to pick from fas for solid, far for regular, fal for light, or fab for brand. It looks like fas is the fallback, so you get solid if you leave your old fa references. For most icons, this change makes the icon heavier or lighter.
you should implement this like this:
html
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x icon-background2"></i>
<i class="fa fa-info fa-stack-1x"></i>
</span>
css
.icon-background2 {
color: #564363;
}
.fa-info {
color:pink;
}
JSFiddle Example: https://jsfiddle.net/codejhonny/8feo4k4x/
142
this icon is transparent so you could reach this but give it background color
.icon-background1 {
color: blue;
}
.fa-info-circle:before {
content: "\f05a";
background-color: red;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
}
check the fiddle
http://jsfiddle.net/Lgq1k4uc/7/
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
