Font awesome examples. Font Awesome and IcoMoon: working with icon fonts
Icons are displayed through the ::before pseudo-class, so you just need to add a class with the name of the icon to any element. The element is usually used , but you can use any other inline element, for example: , etc.
For two main classes are indicated - fa and fa-icon, where instead of icon the name of the icon is written. All names are available on this page.
Rice. 1. Icons for video player
To add an icon named play, write the following code:
The element itself empty and inserted into the place on the page where the icon is required. Its size matches the size of the current text.
We can change the size of any icon from the set using the font-size property, overriding it in our style. Font Awesome also offers five pre-made sizes. It is enough to add an additional class to the element as shown in example 1.
Example 1. Icon size
Original size
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
The result of this example is shown in Fig. 2.
Rice. 2. Icon sizes
Colors
Since the icon is text symbol, then the style properties color , background , text-shadow and others that specify the design of the text are applicable to it. Example 2 shows some options for changing the appearance of icons.
Example 2. Designing icons using styles
The result of this example is shown in Fig. 3.
Rice. 3. Colored icons
Font Awesome introduces a special class fa-inverse , which changes the color of icons to white, so the color is not specified in the styles for the book icon.
Rotate icons
Icons can be rotated 90, 180 or 270 degrees clockwise, and can be flipped horizontally or vertically. The following classes are used for this:
- fa-rotate-90 - rotate 90º clockwise;
- fa-rotate-180 - rotate 180º;
- fa-rotate-270 - rotation by 270º;
- fa-flip-horizontal - horizontal reflection;
- fa-flip-vertical - flip vertically.
It should be taken into account that not all icons make sense to be rotated and reflected; the result will be noticeable for asymmetrical icons (example 3).
Example 3: Rotate and flip icons
The result of this example is shown in Fig. 4. The first airplane icon is displayed in its original form, the second is rotated 90º, and the third is reflected horizontally.
Rice. 4. Icon transformations
Animation
Animation is usually used to create a suspense effect. Icons can be made to rotate clockwise endlessly in two ways. The fa-spin class produces smooth rotation, while the fa-pulse class produces step-by-step rotation. Below is the rotation of a soccer ball.
Combining icons
In addition to the usual display, icons can be combined with each other. To do this, create an element
Today, the Internet is full of various “icon” fonts, with which you can easily add icons to your websites.
Article navigation:
What is Font Awesome
Font Awesome is a font and CSS toolkit designed to put a variety of vector-based, easily customizable icons on your sites.
Everything that can be customized CSS help— can be applied to Font Awesome icons on your projects. One of the most important advantages of these fonts is that they display clearly and beautifully at different sizes. If a regular png icon with a transparent background, or even worse, a jpg icon, when enlarged, will not look very beautiful (blurring effects and fuzziness will appear), then font icon will maintain perfect quality. At the same time, just as in any font a list of symbols is predetermined, so in Font Awesome a list of ready-made icons selected from the most frequently needed icons is predetermined.
Ways to add your own icons
Every day, the Font Awesome service receives dozens of requests from users and companies to add their icons to the service’s library. There are several factors that influence a service’s positive decision to add new icons. One of the main ones is the frequency of requests, in other words, popularity. But even if your proposed icon fits perfectly in all respects and is needed by everyone, you won’t be able to see it in the general library. At a minimum, you will need to wait for the Font Awesome update to come out. As a rule, you need an icon now; there are several ways to do this. Below are the most suitable ones.
The Complicated Way to Edit Font Awesome
- Fork the Font Awesome repository. You will need a properly configured development environment.
- Hack the font file FontAwesome.otf. You can use this instruction: creating Octicons (in English).
- Share your thread with the Font Awesome community. Check for open issues related to your branch and share your repository.
An easy way to make changes to Font Awesome
There are several online service ovs that allow you to customize Font Awesome. Here are the most popular:
- Fort Awesome: https://fortawesome.com/ (from @davegandy, creator of Font Awesome) - Paid service , from the creator of Font Awesome, trial period - 14 days.
- Fontello: http://fontello.com/ — Free service, convenient if you need to change the set of your icons once.
- IcoMoon: http://icomoon.io/app/#/select - An online service that provides many different options for editing and adding icons. Free.
- Fontastic: http://fontastic.me/ - Another service, it is possible to generate svg sprites, there is registration and management of your fonts. Free.
You can use any of the suggested ones, it's quick and easy. Personally I I recommend IcoMooon. I’ve been using it lately and in this article I will describe how to use IcoMoon in more detail.
Adding icons via Icomoon
IconMon is an online service for creating your own fonts from icons for use on websites or in mobile and desktop applications. Let's say you have Font Awesome connected, and you need to add icons from other fonts or even your own icon with your logo. To do this, you create a new project in IconMon, import the Font Awesome font into it, and, if necessary, other fonts or your own icons in the form of fonts/svg images. You then download the resulting font and use it in your application instead of Font Awesome. Below I will show you how to do this step by step.
IconMon: Getting Started
Publishing a ready-made set of Iconmoon icons on the website
After downloading the archive, you can connect it to your website instead of Font Awesome and use icons from this set, including your own icon. To connect to the site, we will need files from the fonts and style.css folder - upload them to our site (if necessary, style.css can be renamed or even added content from it to your css file, which was used on the site earlier). Please note that by placing font and css on your website, the relative path to the fonts in the css file may change. Therefore, open the one already uploaded to your site css code and make sure that the correct paths are specified for the fonts. Here I have highlighted in red the place where you need to check the paths.
@font-face (
font-family: "icomoon";
src: url("fonts/icomoon.eot?29mi8v");
src: url("fonts/icomoon.eot?29mi8v#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?29mi8v") format("truetype"),
url("fonts/icomoon.woff?29mi8v") format("woff"),
url("fonts/icomoon.svg?29mi8v#icomoon") format("svg");
font-weight: normal;
font-style: normal;
After successfully transferring iconmon files to sites, you can use icons in this way:
Home
How to update your icon set in the future
So, we have successfully created, connected and are using our custom Iconmon font, in which we have our own icons and Font Awesome and any others. We did a good job generating this font; we took a long time to write names for the icons, set colors, and edited them. And now we have another new icon and we want to add it to this font of ours. Iconmon offers 3 options for solving this problem:
- Storing your projects in the Iconmon cloud- This paid service. When you sign up for Iconmon, you can choose a subscription, pay for it, and your font designs will be stored in your account. You can always change them, install a higher version, download and use.
- If you haven't cleaned browser cache, then your projects will also remain when you log into IconMon again and you can easily add a new additional icon to your project and save the updated font. The main problem is that once you clear your browser cache, it will all be deleted.
- Project Settings in the selection.json file- the most suitable option for us. First of all, it's free. You download this file in an archive with the font every time you generate it.
Just keep this file and in the future you can go to IconMo and import your projects through it.
Conclusion
There may be more convenient ways to add your own icons to Font Awesome, but they are either paid or require more in-depth technical knowledge. The same method using IconMon is simple, free and quite convenient. If you have any difficulties, then welcome to the comments. I'll be happy to help.
To connect the Font Awesome font to your website, you can use two methods:
Using Awesome Font Icons
You can place Awesome icons almost anywhere by using the CSS prefix fa and the name of the icon, which are located on the site. Awesome font is designed to be used with lowercase HTML elements(you can use the tag for brevity, but using the tag semantically more correct).
fa-camera-retro
The above code will look something like this:
fa-camera-retro
Creating larger icons
To increase the size of icons, you can use the classes fa-lg (increase by 33%), fa-2x, fa-3x, fa-4x, or fa-5x.
fa-lg fa-2x fa-3x fa-4x fa-5x
Creating Fixed Width Icons
Fixed width icons are very useful when creating navigation menus or various lists. To create such icons, use the fa-fw class.
Icons for bulleted lists
Using the fa-ul and fa-li classes, you can replace standard bullets in unordered lists with other icons.
- Awesome icons
- can be used
- like markers
- unordered lists
- Awesome icons
- can be used
- like markers
- unordered lists
Creating elongated icons
To create “stretched” quotes or article icons, use the fa-border and pull-right or pull-left classes.
...Creativity is simply making connections between things. When creative people being asked how they did something, they feel a little guilty because they didn't actually do anything but just noticed. This becomes clear to them over time. They were able to connect different pieces of their experience and synthesize something new. This happens because they have experienced and seen more than others, or because they think about it more.
...Creativity is simply making connections between things. When creative people are asked how they did something, they feel a little guilty because they didn't actually do anything, but just noticed it. This becomes clear to them over time. They were able to connect different pieces of their experience and synthesize something new. This happens because they have experienced and seen more than others, or because they think about it more.
Creating rotating icons
To create a spinning icon, use the fa-spin class.
Creating rotated and flipped icons
To rotate and flip icons, use the following classes fa-rotate-* and fa-flip-*.
icon
icon reflected vertically
icon
icon rotated 90 degrees clockwise
icon rotated 180 degrees clockwise
icon rotated 270 degrees clockwise
icon reflected horizontally
icon reflected vertically
Icons overlaid on top of each other
To stack multiple icons on top of each other, use the "fa-stack" class on the parent element, the "fa-stack-1x" class for the foreground icon, and the "fa-stack-2x" class for the background icon plan. The "fa-inverse" class can be used to invert the color of an icon.
Twitter icon on square icon
"flag" icon on a "circle" icon
terminal icon on square icon
"Prohibited" icon on the "camera" icon
Twitter icon on square icon
"flag" icon on a "circle" icon
terminal icon on square icon
"Prohibited" icon on the "camera" icon
Hello friends.
Today is a new article from the “Design” section.
Those who follow my blog know that a couple of days ago I updated the blog design. So, all the icons that you see opposite menu items and categories, as well as in some headings, for example, in the tabs between switching popular and discussed posts, near the heading of similar articles at the end of the text and near the heading of the number of comments, these are not pictures, and a special font Font Awesome, with which you can easily create good quality icons.
The same applies to the small icons next to the number of comments, date, number of views.
And in most cases, this is much easier to do than writing styles and displaying an image every time. There is also no need to specify additional styles for alignment, color, and so on, since the icons are displayed in font and match the general styles of the block where they are placed.
In general, the thing is very cool. When I made my first orders, I came across these icons and they caused me a lot of inconvenience. I just didn't know how to use them, and in some cases I simply replaced these icons with images. Now I see absolutely no problems in using them. All you need to do is connect the Font Awesome font to the site, and then add the code for displaying the icon in the right place. It’s very simple, let’s look at it in practice.
How to connect Font Awesome icons to your website
There are 2 connection methods:
- Connect the icon library from the service itself, i.e. set the path to the icon file on the side cloud storage, where the service stores it. In this case, every time the page is loaded, the this file. Initially, I had this option, but then I noticed that it slowed down the loading of pages quite significantly. That's why I switched to the second option.
- Download the Font Awesome icon file from the official website and connect it to the template, just like a regular style file. The site becomes noticeably faster.
Let's look at both options in more detail.
Option 1
Let's go to Font Awesome official website and take the connection code line for downloading a file from the cloud storage. The line will be in the first paragraph of the page, and I have also duplicated it below.
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> |
We insert it into your site between the areas and insert it here. If you have a WordPress site, then this area is located in the Header.php file.
This completes the connection. All that remains is go to this page and select the appropriate icon. Click on the icon you like and you will be taken to a page with options for different icon sizes so that you understand how it will look with different font sizes. There will also be code that will display the icon.
We paste this code anywhere where we want to display the icon.
Note that this insertion method does not work in WordPress widget titles. If you simply insert the icon code before the phrase, it will disappear from there. Therefore, you need to use another method with using Jquery, about which I will make the next article. Everything is also very simple there.
You need to place the code in template files or some text elements. For example, in a text widget in the content input field itself, icons work. This is how the widget of popular and discussed posts works for me. The rest of the icons are written in the layout of both the template itself and the plugins.
Option 2
Download the folder with files from here.
Upload all files to the root of the theme to all folders and files. I didn’t go deep into whether I needed to download just one specific file or all folders, so I downloaded everything that was inside the archive.
Next you need to include the font-awesome.min.css file located in the CSS folder. We use the following line, just write down your path (domain and topic name). We place it in the same way as with the first option - in the header of the site.
< link rel = "stylesheet" href = "http://your domain/wp-content/themes/theme folder name/css/font-awesome.min.css"> |
Here is such a simple but extremely useful material for those who like to do something with the design of their website. There is no need now to use images, reduce them in Photoshop, crop them, and so on. All you need to do is connect the Font Awesome font and use its capabilities.
Changing icon colors
If you need to change the color of the icons, then this is also quite possible and will not be difficult. Each icon has a common class (.fa) and an individual class with the name of the icon. In the example above with the pencil icon, the individual class is as follows:
fa-pencil-square-o
< span class = "s" >fa - pencil - square - o< / span > |
If you want to set a specific color for this icon, then add this class to your style file and write the color inside it, as well as the size, font style and other styles as you wish. The nuance is that the icon is displayed in the before pseudo-element, so it is this element that needs to be styled. For example:
Fa-pencil-square-o:before( color: #111; /*black color*/ font-size:12px /*icon size 12 pixels in width and height*/ )
CSS code and examples of using this icon font "Font Awesome". Below you see the CSS code itself and a table with examples of classes, content (content:"") and the result.
Font Awesome icon fonts
Font connection:
Add the css file of the font that is needed (depending on the version).
If the structure of your site (application) has a different file structure (the files are in different folders), then change all the paths to your paths (for example: /assets/css/).
If you don't understand what we're talking about, go. Then press the keyboard shortcuts Ctrl+U or right-click on an empty area of the page > Page Source Code / Page Source Text (something like this should be written in the context menu).
For example, you can connect the FA font like this:
This code will connect the maximum version of the font with all icons
Also drop into this folder /css/fonts/ the folder from the archive _site-89_fontawesome-pro-5.8.2.zip/fontawesome-pro-5.8.2-web.zip/ webfonts
Add this code to your page or CSS file so you can easily use the FA font ( , NOT ) , (font-family:"Font Awesome 5 Pro","Font Awesome 5 Brands";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line -height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale)
How to use icon fonts?
For example, you can use CSS code import. Download and place the font files on your server. Then connect them to any of the connected to desired page CSS file. The connection code is available above. After this, you can write the following code, for example:
It will turn out:
Download file
As you can see, everything is very simple. That's why we created this page so that you can see the CSS code right away, html code and the finished result so as not to use additional software. If you don't want to load all the CSS code, you can just import the font and create your own classes.
Fa-star-o:before(content:"\f006";) 1986 icons
Related articles
