Font awesome color icons. Font Awesome and IcoMoon: working with icon fonts

with the fa-stack class, and we already insert the desired icons into it. First comes the bottom, then the top. The class fa-stack-1x or fa-stack-2x is added to the icons themselves, depending on which icon should be larger in size. The basic structure of the code is shown below.

In this article, I will tell you as simply and clearly as possible what the Font Awesome icon font is, how to install it, and explain several examples of use.

What is Font Awesome font?

The Awesome font is needed in order to use icons without uploading any images (icon collections, etc.) to the site. This font (in version 4.1) includes 441 icons, which become available when you apply a specific icon class to an element. But more on that later. Below you can see a small part of icon examples:

Pros of the font
- For free
- Easy access via CSS
- 441 icons (in version 4.1)
- Works in IE
- Scalability
- Displays perfectly in e-readers and i-devices!
- Many designers have already appreciated and are using the font!

How to install Font Awesome font (with icons)?

1. Download the font from the site http://fontawesome.io/. It weighs a little, about 400 KB.

2. Copy the unpacked files to your project (for example, where is the index file). The names of the files most likely will not match existing ones, since their names are quite specific.

3. Connect files in the head of your project. I offer two options - if it is located higher in the directory and if it is in one.

4. Use a font. See the example below:

Photo icon
Check Icon

Examples of Font Awesome font

Let’s say we are working on some actions according to the list:

• Ready


• Ready


• Loading


• Expectation

Waiting icons:

Quote:

What a pity it’s not given
It's time for us to understand
Who can we find?
And with whom to lose...
Rotate the icons:

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

CDN Font Awesome is the easiest way to start using Font Awesome on your site or application, and with just one line of code. No need to download or install anything.

We create each set of icons individually for each site, which will allow you to change icons quickly and without unnecessary hassle. Also, using this email address, we can identify which set of icons is yours, which means that you can manage your sets.

Icons for the site. Fast.

You don't have to waste time on files on your server. You'll get all 675 icons plus style sets - all optimized for fast loading.

Easy updates

Since each site will have a unique set of icons, you can easily update it without any changes to the code. Wonderful =).

Or

Advanced customization Easy

Using CSS

1. Paste the following code into the tag into the HTML code of your website.

   "path/to/font-awesome/css/font-awesome.min.css">

2. See examples

Using Sass or Less

Use this method to customize Font Awesome 4.7.0 using LESS or SASS.

1. Copy the entire font-awesome folder to your project folder.
2. In your project, open the files font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit @fa-font-path or $fa-font-path respectively to point to the folder with fonts.

   @fa-font-path : "../font" ;

   The path to the fonts folder must be relative to the compiled css folder.

3. Compile your LESS or SASS files using a compiler. Everything should work.
4. Check out the examples to get started with Font Awesome!

Or

Advanced level Pro

1. Add this line to your application's Gemfile:

   gem "font-awesome-less"

2. Next run:

   $bundle

3. Or install manually:

   $ gem install font-awesome-less

If you are using Rails, then paste the code below, for example, into the application.less file:

1. Add the following line to your project's Gemfile:

   gem "font-awesome-sass"

2. Next run:

   $bundle

3. Or install manually:

   $ gem install font-awesome-sass

If you are using Rails, then paste the code below, for example, into the application.scss file:

@import "font-awesome-sprockets" ;

@import "font-awesome" ;

Additional Information

Validators

In practice, these validator warnings are irrelevant, since most CSS works without hacks and, accordingly, they do not contribute to areas where they are not used. This is actually why we ignore these warnings.

Internet Explorer 8 and @font-face

IE8 has several problems with @font-face when used in conjunction with the:before pseudo-element.

Font Awesome uses just such a combination. If the page is cached or loaded without the mouse cursor hovering over the browser window (for example, when clicking the "refresh" button or loading content through a frame), then the page will be generated before the font is loaded. Hovering the mouse over the page (body) should display some icons, hovering over the rest of the unloaded icons will also reanimate them.

this problem.

Do you want to make your website even more attractive? Font icons will help decorate your posts, pages or menus. And when it comes to font icons, we can’t help but remember Font Awesome.

If you want to add a large collection of Font Awesome icons to your WordPress site, then read on for two quick and easy ways to add them to WordPress.

What are Font Awesome Icons and how are they useful?

add_action("wp_enqueue_scripts", "enqueue_load_fa"); function enqueue_load_fa() ( wp_enqueue_style("load-fa", "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); )

Inserting Font Awesome icons Once you've added the code to your theme, you're ready to start using Font Awesome icons everywhere..

You can find a complete list of icons at

Font Awesome website

For example, if you are looking for the “Download” icon, then simply enter “download” into the search and select from the available options:

After selecting the icon you like, you can see a screen with different sizes of that icon. You should notice a small block of code in the center of the screen:

You need to copy the entire code of the selected icon. Then, you can paste this code anywhere in WordPress, no matter what editor you use. Just make sure you paste it while the editor is switched to "Text" mode:

As you can see in the example above, the icons are quite small. If you need to increase them, you need to add a few lines of code. For example, to double the size of your icons, you would add "fa-2x" to the icon class.

For example, here is the initial code for the icon:

And here is the code with the icon enlarged 2 times:

In real life, the icon will now look like this:

Here is a list of pieces of code you need to add to change the size:

• fa-lg – increase by 33%
• fa-2x – increase 2 times
• fa-3x – increase 3 times
• fa-4x – …
• fa-5x – ... well, you get the idea!

You can also do other cool things like use the Font Awesome icon as a bullet point, add animations, and more. On the official Font Awesome website you can find instructions on how to change font icons.

2. How to Add Font Awesome to WordPress Using a Plugin

If you don't like the previous method, then you can install the plugin. There are many different plugins where this feature is available, but one of the most popular is Better Font Awesome:

You can try other plugins, but we think this one is the best for several reasons:

• It is updated regularly. This is important because several popular Font Awesome plugins haven't been updated in years.
• Automatically imports a new set of Font Awesome icons.
• Allows you to add icons via a shortcode or the same code we used.

To get started, install and activate the plugin.

It will add a new menu section Settings → Better Font Awesome in your console. You don't need to configure anything, just follow the instructions the plugin will provide:

Adding icons

To add icons to posts, you can use the same method we showed you in the manual version or use a shortcode. The advantage of using a shortcode is that you don't have to change the "Text" tab in your editor.

The shortcode format you need is:

Where NAME is the name of the icon on the Font Awesome website:

You can add this shortcode to the Divi module or to your regular WordPress text editor. Here's an example where we added an icon via a shortcode to a text module while using the Divi Visual Builder:

Visual Builder displays it like this:

You can use the same shortcode in the regular WordPress editor.

If you want to change the size of your icon using a shortcode, then simply add a class tag with the icon size:

Results

That's all! Two different ways to add Font Awesome vector icons to your WordPress site. We prefer the manual method because it takes less time and you don't have to worry about potentially breaking the plugin later.

But if you don't want to touch the theme code, then it's better to use the Better Font Awesome plugin.

Now you! Do you use Font Awesome?

In one of the previous articles, we wrote about the use of icon fonts as one of the ways to achieve adaptive images on the site. Here for this article. And today we’ll talk about one of the most popular icon fonts – Font Awesome. Today we will see in practice how to connect Font Awesome on a website using the WordPress engine without using a plugin and how to use this font.

What is Font Awesome and what are its advantages?

The icon font Font Awesome is a font created using icons, but it is by no means a set of pictures. Why is this distinction so important? Because Font Awesome:

• Vector means it looks great no matter what size it is displayed at.
• Customizable – You can manipulate it like any other font. Change colors, add animations and more!
• Cross-browser compatibility – the icon font should work in almost any browser.

Font Awesome currently offers a set of 1,264 different and free icons that you can add almost anywhere on your WordPress site. If this number of icons is not enough for you, then upgrade to paid Pro.

How to Add Font Awesome to WordPress Manually (Without a Plugin)

Adding the Font Awesome font to your WordPress site manually is quite easy. This process consists of 2 parts: first, you need to include the style file of this font in the section , secondly, in the source code (in the template, or in the Text editor mode in the Console) use a specific class for the desired icon.

Stage 1: connecting the Font Awesome font style file

The first step is to add the Font Awesome CSS styles to the active theme's header.php template. Add the code for connecting the CSS style file to the section :

This code will include the Font Awesome stylesheet file from the Bootstrap repository via CDN. You can also directly download the styles file from the official Font Awesome website (https://fontawesome.com/) and include it from your theme.

A more preferable option for connecting not only styles, but also scripts, is to use a special connection function in the functions.php file of the active theme. Instead of editing the header.php file, add the following code to the active theme's functions.php file:

Function load_font_awesome() ( wp_enqueue_style("font-awesome-style", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); ) add_action(" wp_enqueue_scripts", "load_font_awesome");

Using Font Awesome Icons

Once you've included the styles you want in your theme, you can start using Font Awesome icons almost anywhere on your site.

To find a complete list of icons, go to the official Font Awesome website in the menu section Icons and select the desired icon. For example, if you want to add a thumbs up icon, search for the thumbs-up icon (https://fontawesome.com/icons/thumbs-up?style=regular).

Each icon has its own page where you can see the approximate appearance of the icon at different sizes, find out the Unicode code, and you can also download the icon in SVG format. Of greatest interest to us at the moment is the example code for inserting an icon. For example, for a thumbs up icon, the example code would be:

IMPORTANT! Please note that in our example we are using font version 4.7.0. Currently the latest version is version 5.1.0 and it uses a different class format. For example, the above icon is connected in the format .

Once you have selected an icon, copy the code to connect it and paste it in the desired location. This can be any template file in the active theme. Or you can insert icons through the Console. When editing a post/page in Text mode, add the desired class for the i tag (or, for example, the span tag).

When using different versions of the Font Awesome style file, the class format syntax will be different:

Brief summary

In today's article, we looked at the practicalities of adding the Font Awesome icon font to your WordPress site. If you have questions about this topic, please voice them in the comment form below.

Write in the comments your opinion about using Font Awesome, and also share your impressions if you use versions 5.x.x of this font.