Font Awesome | Styling Basics: Changing Size & Color

In this screencast we'll guide you through the process of changing icon color and size. Whether you're a beginner or an experienced designer, this tutorial will help you get started with Font Awesome icons.

Episode Highlights:
- Learn how to adjust icon colors and sizes.
- Understand the "fa-solid" prefix and its role in icon styling.
- Explore changing colors with real examples.
-Use various methods to resize icons, such as relative sizing or literal scaling.

What’s Covered in This Video:
1. Introduction to icon styling basics - changing color and size.
2. A quick review of adding Font Awesome icons to your project.
3. Demonstrating the automatic inheritance of CSS size and color for icons.
4. Exploring the "fa-solid" prefix for solid style icons.
5. Changing the icon color.
6. Utilizing hexadecimal colors for brand consistency.
7. Altering icon size using relative sizing ("sm," "lg," "xl") and literal scales (1x, 2x, 3x).
8. A walkthrough of previewing icons in different colors and sizes on the Font Awesome site.

Now that you know how to change your icons' color and size, go make something awesome! 🙌

Stay connected with us:
🐦 Twitter: @fontawesome

[doodlcreative]

You can also do these things with CSS — font-size: 12px; color: blue

[Eternalhealtheva]

Hello bro. May i use it with the free version? must i use the pro version in order to do so? kind regards my mate