Can I change the color of Font Awesome s icon color

Question

I have to wrap my icon within an  lt a gt  tag for some reason  Is there any possible way to change the color of a font-awesome icon to black  or is it impossible as long as it wrapped within an  lt a gt  tag  Font awesome is supposed to be font not image  right      lt a href   users edit  gt  lt i class  icon-cog  gt  lt  i gt  Edit profile lt  a gt

User · Answer

just give it the style whatever you want like  style  color  white font-size  20px

User · Answer

To hit only cog-icons in that kind of button  you can give the button a class  and set the color for the icon only when inside the button   HTML    lt a class  my-nice-button  href   users edit  gt       lt i class  icon-cog  gt  lt  i gt      Edit profile  lt  a gt    CSS    my-nice-button gt i   color  black      This will make any icon that is a direct descendant of your button black

User · Answer

This worked for me    icon-cog     color  black      For versions of Font Awesome above 4 7 0  it looks this    fa-cog     color  black

User · Answer

With reference to  ClarkeyBoy answer  below code works fine  if using latest version of Font-Awesome icons or if you using fa classes   fa icon-white       color  white      And  then add icon-white to existing class

User · Answer

HTML        lt i class  icon-cog blackiconcolor  gt    css         blackiconcolor  color black     you can also add extra class to the button icon

User · Answer

You can specify the color in the style attribute    lt a href   users edit  gt  lt i class  icon-cog  style  color black  gt  lt  i gt  Edit profile lt  a gt

User · Answer

fa-search      color  fff       you write that code in css and it would change the color to white or any color you want  you specify it

User · Answer

If you want to change the color of a specific icon  you can use something like this    fa-stop       color red

User · Answer

You can change the color of a fontawesome icon by changing its foreground color using the css color property  The following are examples    lt i class  fa fa-cog  style  color white  gt      This supports svgs also   lt style gt   fa-cog  color white     lt  style gt       lt style gt   parent svg   parent i  color white    lt  style gt    lt div class  parent  gt     lt i class  fa fa-cog  style  color white  gt   lt  div gt

User · Answer

It might a little bit tricky to change the color of font-awesome icons  The simpler method is to add your own class name inside the font-awesome defined classes like this    And target your custom defined  class name in your CSS to change the color to whatever you like

User · Answer

To change the font awesome icons color for your entire project use this in your css   fa     color   red

User · Answer

Use color property to change the color of your target element as follow    icon-cog      selector of your element     color  black     Or in the newest version of font-awesome   you can choose among filled or not filled icons

User · Answer

HTML    lt i class  icon-cog blackiconcolor  gt    css      blackiconcolor  color black     Using class will give you a free binding property which you can apply on any tag you require

User · Answer

For me the only thing that worked is inline css   overriding   lt i class  fas fa-ellipsis-v fa-2x  style  color red  important  gt  lt  i gt

User · Answer

Write this code in the same line  this change the icon color    lt li class  fa fa-id-card-o  style  color white  aria-hidden  true  gt

User · Answer

If you don t want to alter the CSS file  this is what works for me  In HTML  add style with color     lt i class  fa fa-cog  style  color  fff   gt  lt  i gt

User · Answer

Is there any possible way to change the color of a font-awesome icon to black   Yes  there is  See the snipped bellow  x000D   x000D   lt  -- Assuming that you don t have  this needs to be in your HTML file  usually the header  -- gt   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt    lt  -- Here is what you need to use -- gt   lt a href   users edit  class  fa fa-cog  style  color black  gt  Edit Profile lt  a gt  x000D   x000D   x000D    Font awesome is supposed to be font not image  right   Yes  it is a font  Therefore  you are able to scale it to any size without losing quality

User · Answer

just give  and text style whatever you want like  D HTML    lt a href  javascript    class  fa fa-trash  style  color  d9534f   gt      lt span style  color black   gt Text Name lt  span gt   lt  a gt

User · Answer

You can change the Font Awesome s icon color with the bootstrap class  use   text-color   example  text-white

User · Answer

Try this    lt i class  icon-cog text-red  gt   lt i class  icon-cog text-blue  gt   lt i class  icon-cog text-yellow  gt

[html] Can I change the color of Font Awesome's icon color?

Examples related to html

Examples related to css

Examples related to colors

Examples related to icons

Examples related to font-awesome