Font awesome css color

Styling Basics

Just drop an icon into your project and you’ll find it blends right in with its surroundings.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Before You Get Started

Font Awesome icons automatically inherit CSS size and color (as seen in the examples below). This means they blend in with text inline wherever you put them. Font Awesome tries not to be too opinionated, and sets just the basic styling rules icons needed to render properly in context.

 span style="font-size: 3em; color: Tomato;"> i class="fa-solid fa-camera">i> span> span style="font-size: 48px; color: Dodgerblue;"> i class="fa-solid fa-camera">i> span> span style="font-size: 3rem;"> span style="color: Mediumslateblue;"> i class="fa-solid fa-camera">i> span> span> 

Additional Styling Options

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

While getting icons into your project is straight-forward, we’ve also provided additional styling utilities for things like sizing icons, aligning and using icons in a list, as well as rotating, transforming, and animating icons to let you make your icons awesome.

You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project’s code. Everything you can normally control with CSS is up for grabs — from color to display to alignment.

Go Make Something Awesome

Font Awesome is the internet’s icon library and toolkit used by millions of designers, developers, and content creators.

Источник

Customizing Icons

Font Awesome icons can be customized even further using your own CSS. We’ve even added CSS Custom Properties to our style toolkit options.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Before You Get Started

Customize with CSS Custom Properties

Our styling toolkit provides a lot of utility, including size, rotate, stack, and animate icons. Using the CSS custom properties

(opens new window) below, we’ve added easy ways to customize aspects of our styling toolkit’s features.

Using Custom Properties in a Project

(opens new window) are still a pretty new thing for most folks. Here are some ways you can define them within your project…

Setting Properties with CSS :root

You can define custom properties at CSS :root pseudo-class

(opens new window) level. This will make any icons that use a styling toolkit’s feature inherit the properties by default.

 style> :root  --fa-style-family: "Font Awesome 6 Pro"; --fa-style: 400; --fa-border-color: red; --fa-primary-color: green; --fa-secondary-color: red; > style> 

Setting Properties with Project-Based CSS Rules

You can also set custom properties inside of your project’s CSS, in the of a page or in a separate stylesheet. These properties will be scoped to just elements that match the selector of the rule you’ve included them in.

style> /* setting a decorative icon dropcap before a block of text */ .ye-olde-icon-dropcap  --fa-border-color: WhiteSmoke; --fa-border-padding: 2em; --fa-border-radius: 0.25em; --fa-pull-margin: 2em; font-size: 8em; > /* playing DJ with fa-record-vinyl */ .track-quick-spin  --fa-spin-duration: 0.25s; --fa-spin-iteration-count: 1; --fa-spin-timing: ease-out; > .track-vocals  --fa-spin-duration: 10s; --fa-spin-timing: ease-in-out; --fa-spin-iteration-count: 2; > .track-dope-hook  --fa-spin-duration: 10s; --fa-spin-iteration-count: 10; > /* Mo' Malfoy! Mo' Malfoy! Mo' Malfoy! */ .theme-slytherin  --fa-primary-color: darkgreen; --fa-secondary-color: silver; > /* extra sharp flavor */ .theme-sharp  font: var(--fa-font-sharp-solid); > style> 

Setting Properties with Inline Styles

Many of the examples in these docs define CSS custom properties using inline styling by adding a style attribute to an element. This is best for one-offs or very custom colored/styled duotone icons that you won’t need to change at a system level.

 i class="fa-solid fa-bomb fa-rotate-by" style="--fa-rotate-angle: 45deg;">i> i class="fa-duotone fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;" >i> 

Be careful of specificity and cascade!

CSS Custom properties that are redefined will trump each other. Defining a property in :root <> and then defining the same property in a rule or inline will result in the :root style being overridden.

Add Your Own Custom Styling with CSS

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Everything you can typically control with CSS is up for grabs — from color to display to alignment. We recommend targeting icons in your CSS in a couple of different ways. You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project’s code.

Here’s a quick example of using those selectors to add custom color to Font Awesome icons:

 head> link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"> link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"> link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet"> link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet"> head> 

 style> /* custom styling for all icons */ .fa-solid, .fa-brands, .fa-sharp-solid  background-color: papayawhip; border-radius: 0.2em; padding: 0.3em; > /* custom styling for specific icons */ .fa-fish  color: salmon; > .fa-frog  color: green; > .fa-user-ninja.vanished  opacity: 0.2; > .fa-facebook  color: rgb(59, 91, 152); > style> body> i class="fa-solid fa-fish">i> i class="fa-solid fa-frog">i> i class="fa-solid fa-user-ninja vanished">i> i class="fa-brands fa-facebook">i> i class="fa-sharp fa-solid fa-fish">i> body> 

Writing Custom CSS with our SVG + JS framework

When using our SVG framework, remember that Font Awesome-based DOM elements are replaced with new elements by default. Be sure that your CSS rules target the right elements.

Источник

How to Easily Change Font Awesome Color in HTML & WordPress

Not sure how to change the font awesome color on your WordPress or HTML website? I know, sometimes we get confused and forget the basic coding of CSS, and it literally happens with me every time I start development.

And not just me, a lot of people get confused while building or making changes to their website, so here I’m with another exclusive post on changing FontAwesome icon colors in WordPress. This guide is easy to follow and it requires basic CSS knowledge to alter the color of icons.

What is Font Awesome Icon?

Font Awesome is an online library of thousands of icons that are used by millions of website owners, designers, and developers. The installation of Font Awesome icons on your website is pretty simple, you just need to paste a code on your site, and the icons will be visible on your site.

By using it, you can find icons of different categories like alert, alphabet, animals, automotive, communication, and many other types of icons. You can also customize icons by changing color, style, and also adding animations.

How to Change FontAwesome Color

Changing the color of icons is easy, and you can easily use a single line of code to change the color of font-awesome icons as well as icons from other most popular brands.

So, let’s assume we’re creating a social icon button and want to change the background color of our fa-facebook font-awesome icon; this can be easily achieved by adding a CSS property named “ background-color ” in either your “ fa ” or “ fa-facebook ” CSS variable.

background-color: #243c64

But depends upon your needs, I recommend you to only use “ background-color ” value in “ fa-facebook ” properties. Adding the line of code, as shown above, will only change the background color of fa-facebook icon and not the other icons on your website – but if you add the code in the” fa ” property, it will change the background color of every font awesome icon on your website.

Similarly, if you want to change the color of the icon, you’ve to use “ color ” property in either your “ fa ” or “ fa-facebook ” CSS variable.

color: #243c64

It will change the color of the selected element on your website.

But what if you’ve two icons on your website with the same CSS variable?

If you have got the same icon used on your website and you just wanted to change the color code of only one icon, then you’ve to use inline CSS code for this. Otherwise, it will change the color of all the elements with the same CSS name.

Using the inline CSS is really easy, and you just have to add style=»color: #243c64″ inside the HTML element.

• If you’re using Page Builder plugins like Elementor, Divi, or Visual Composer, you can easily change the FontAwesome color right from your page builder dashboard,
• And if you’re not using a page builder on your website, I highly recommend getting one to design your website more fluently.

How to Add CSS Code in WordPress?

Adding the CSS code which we shared above is easy in WordPress. Once you decided the icons on which you want to change the color, then go to “Appearance > Customizer > Additional CSS” and paste your CSS code.

Once you have added your CSS code inside the box, click on the blue-colored “Publish” button showing in the top left corner. It will further change and apply the CSS you applied on your website.

How to Add CSS Code in Page Builders?

Are you using page builders to create landing pages on your site? If yes, don’t worry; I will show you how you can add CSS code in popular page builders like Divi and Elementor:

How to Add CSS Code to Change Font Awesome Color in Divi?

First, let’s see how you can add CSS to change Font Awesome color in the Divi theme. There are multiple ways to add custom CSS to the Divi theme. However, I recommend you use Divi’s Theme Options, as it is one of the easiest ways.

Navigate to “Divi > Theme Options” from your WordPress dashboard. After that, you need to scroll down till the end of the page, as shown in the above image. Here, you will see a black box where you can enter your CSS code.

How to Add CSS Code to Change Font Awesome Color in Elementor?

In this section, I will discuss how you can add CSS code to the Elementor page builder. First, you must install and activate the Elementor page builder on your WordPress site.

After that, simply edit any post or post and click on the three bars (refer to the above image).

Next, open “Site Settings” and select the “Custom CSS” option to access the code editor. Here, you can add your CSS code to change FontAwesome color.

Wrapping Up!

Changing the color of fontawesome icon is easy, and it can be done within a few seconds. Here in this guide, I’ve shared a few ways to change the color and the background color of your fontawesome icons easily. The same settings can be done for any other icon files.

I hope you liked this article, and if you do, please share it with your friends, family, and followers. Also, if you’re getting any issues with changing the color of your icons, then you can share your query with us in the comment section below.

💡 Recommended Readings…

Источник