Change propreties Icon Fontawesom with css

Hello everyone, Is it possible to change the font color of an icon and change the color of the symbol? A little complex.
Exemple this :

Change cercle ( background white) and the check red.

I don’t know if I’m clear enough.

It is possible to change the color of an icon. Use the color property to change the color

For Fontawesome, no, not out of the box (duotone icons, which would allow it, are part of the paid plan, access to them isn’t free, it costs $99 a year). You can access all of the files for free, they’re on GitHub, but you can’t use their service to easily put icons into your code, you have to do it all yourself.

In general, not just for FA, yes, as long as the icon is SVG and it’s in your HTML code – the elements in the SVG markup can be styled with CSS in exactly the same as HTML (for colours, stroke and fill properties).

You can get the Fontawesome icons as SVGs from their GitHub, but note this will be a bit painful if you don’t know what you’re doing: have a Google for recent articles on doing it (FA is quite old and has had several versions, so older articles will likely be out of date)

This is a project where I have to use only icons from Fontawesome but thank you :slight_smile:

.article-second-page::before {
   color: white; /* couleur à ajouter ! */
   font-family: "Font Awesome 5 Free";
   content: "\f058";
   position: absolute;
   font-size: x-large;
   top: 0.8em;
   right: 1em;
   opacity: 0;
   z-index: 2;
   transition: transform 300ms;
   -webkit-transition: transform 300ms;
   -moz-transition: transform 300ms;
   -ms-transition: transform 300ms;
   -o-transition: transform 300ms;
}

The icon it’s this

I must put style : * Solid Style ( fas )

I’m not quite sure what you’re saying. Is it that you’ve solved this by overlaying a another icon on top? Or that that’s the icon you want to change part of the colour of (which my answer above covers)?

I want change part of the colour of my icon .

Right, so you’re using FontAwesome, and you either have to pay them $99 a year to get bichrome icons or you download the SVG versions of the free set from GitHub, you put the icon in the HTML and you apply CSS to it. There isn’t another answer that’s different to the one I gave above.

I am a student and in my project we should not pay but try to introduce changes with HTML and css. Thank you, my teacher explained to me how to change the color.

Thanks a lot that’s what i did i presented the link in my html. I understand
:slight_smile:

1 Like

I believe that there are free tools that help you SVG-ify icons, which would allow you to selectively change the color/appearance of individual pieces. I don’t have any specific recommendations. I always have to find tools like that through a fair amount of trial and error.

Also, you can try just with CSS. Do you mean the checked circle you use for RADIO BUTTON in forms? Try on your CSS. Set the elements

input [type=radio] {
background: white;
}

input[type=radio]:checked{
color:red;
}

It is just suggestion. Maybe works… good luck. I am using bootstrap and it has interesting classes for forms.

Don‘t forget that the form elements have their own name, their own properties and attributes and default values. You change the values at your own.

Sorry for the late, thank you very much.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.