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 simple ways, how 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.
Find full list icons can be found 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 this icon. In the center of the screen you should notice a small block of code:
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:
You can return to the visual tab after you've finished embedding the code. After publishing a post, you will see your icon in the frontend:
How to increase the size of a Font Awesome icon
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 new set 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.
He will add new section menu 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 Divi module or regular one text editor WordPress. Here's an example where we added an icon via shortcode to a text module while using 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 add Font Awesome vector icons to your WordPress site. We prefer manual method, since it takes less time and then you don't have to worry about potential plugin failure.
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?
Today, the Internet is full of various “icon” fonts, with which you can easily add icons to your sites.
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 using CSS 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 transparent background or even worse, the jpg icon will not look very nice when enlarged (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 availability open problems 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. I personally I recommend IcoMoon. 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 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 could 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 one 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 payable 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- 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 adding your own icons to Font Awesome, but they are either paid or require deeper 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.
Dear readers, greetings! I have been planning to talk about the font for a long time; I actively use it in my projects and today I will give several arguments in its favor.
If you are still using raster images for small graphic elements on the site, I have to disappoint you - when loaded, they create additional http requests to the server, and when scaled, they lose clarity.
Previously, to reduce the number of requests, I combined graphic design elements into . This solution for optimizing site loading speed is still relevant today. However, the problem of scaling is not solved in this way and when images are enlarged, they lose their attractive appearance.
Contains a huge set of vector icons that scale perfectly and look great on screens high resolution! They are used everywhere on the site: in the search form, in the list of categories, near the date of publication of the article, as well as in social network buttons and other design elements.
Advantages and disadvantages of icon fonts
Traditional images have long proven themselves well as graphic elements of website design; in the modern era, they are gradually being replaced by new features of CSS3, SVG and fonts with icons.
What is the reason for their popularity? Flexibility of configuration, ease of installation and use in the project played a decisive role. Main advantages:
- The collection contains more than 500 free vector icons for the site.
- Icons are scaled to any size without loss of quality.
- Styling with using CSS— font size, color and other properties.
- Does not require browser support to be enabled.
- Cross-browser compatibility (IE7 and higher), support for mobile browsers.
Along with the advantages, it is worth mentioning the disadvantages; unfortunately, they also exist, but they are quite minor:
- Unlike pictures, which are displayed identically in different browsers, fonts may look different depending on the browser and operating system.
- The designers have worked in detail on a significant number of icons, but there is a possibility that you will not find the one you need for your project.
How to connect the Font Awesome font
The first and easiest way to connect a font is to download it from an external CDN, inserting it into the section
the following line: <"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">The second way is to manual installation Font Awesome font to your hosting. Download the archive from the official website, unpack and save the css and fonts folders on the server into the font-awesome directory. Connects in the same way, changing only the path to the file:
<link rel = "stylesheet" href = "../font-awesome/css/font-awesome.min.css">How to use Font Awesome icons on your website
In order to insert an icon onto a page, proceed as follows: find the desired icon on the site and copy its code, then paste it in HTML mode:
class="fa fa-twitter" > i>
The official website of the project has documentation and additional examples of use.
Sometimes site elements are dynamically generated, for example, PHP function, and there is no direct ability to edit HTML, then pseudo-classes are used in CSS selectors.
I'll show you how to do this using the category widget as an example. Look at the source code snippet:
<div class ="widget_title" > Blog categoriesdiv > <ul > <li class="cat-item cat-item-5" > <a href = "/category/wordpress/" > WordPressa > li > ul >.cat-item :before ( content : "\f07c" ; font-family : FontAwesome; color :#393 ; padding-right :10px )The content property generates the icon from the hex code of the Unicode character table, which can be found on the page with the icon:
Unicode \f07c exactly corresponds to the hex code of the desired icon, which we later use to style our own classes.
I'll conclude with this short review If you have any questions, ask in the comments. Do you use Font Awesome icons on your site, perhaps a different font?
Here you can download unique Blogger Templates. The topics in this collection are more advanced SEO optimization.
Languages: English Russian.
Types: News, Magazine, Blog, Minimalism, Portfolio, One-page, Gallery, Grid, Online store, Business cards, Corporate sites.
Topics: Sports, Photos, Games, Cooking, Style and Fashion, Women's, Children's, Cars, Health, Travel, Tourism, Design, Home renovation, Interior, Nature, Animals, Dancing, Video, Music, Politics, Economics, Business, Forex, Art, Pictures, Wallpaper, Earnings, Real Estate, Fishing, Hunting, Software, Software, Android Gaming Applications.
Technologies: Jquery, AMP, Bootstrap, Ajax, Javascript, Responsive design.
Best blogger templates, users' choice
UberSpot perfect solution for those who care Beautiful design, SEO optimization and effective functionality. In this theme you will find a number of cool and productive new products, for example, a new widget for Instagram, Site Maps, Publications, Comments, etc. You can also use two different types layouts.
Unstoppable "Niche Conqueror". This is the ideal solution for single-thematic sites and blogs. The idea when creating the theme was to implement endless navigation, the movement of which could be tracked by search engines. Thus new system navigation, unlike the previous ones, will not just increase behavioral factor, but will also fully display it, which will entail an increase in the site’s position in the search.
Designed on the basis of the new Blogger Themes from the series (CNES). Capable of solving many assigned tasks. You can use it with all widgets, or partially, as a personal information blog. The page loading speed will pleasantly surprise you.
BlogBoard is one of the best griders in 2018. Combines several styles at once. Can be used as a blog online store. It will do a great job of presenting your skills and services, so it’s also suitable for a portfolio.
Dionis has a simplified type of message delivery. Suitable for any niches and stories. Among the features we can highlight a beautiful preloader (animated picture before loading home page), recommended messages pop up with right side when scrolling the page.
This is a fast and flexible model that has absorbed several additions from social networks. An excellent option for those who value their time. Translated into Russian.
Mistik has four different styles. You can choose the one that you like the most. Easy setup menu, color schemes and other elements allow you to create your own unique design.
NewsB is a lightweight news theme with a combined color scheme, simple and at the same time stylish widgets created for various topics and content categories. NewsB is fully responsive and seamlessly supported by everyone modern browsers. Full version includes today's latest blogger SEO settings, which will allow your site to increase its ranking search engines higher.
Minima Mag is a modern news template, With adaptive design, fast loading of messages, stylish gadgets and of course with a clean design that seamlessly combines three colors, which ultimately makes Minima Mag neat and elegant.
A stunning theme with a classic style designed for women's websites and blogs. Avicia is a professional theme with an elegant and modern design that can inspire and convey only positive emotions to readers.
Dream Press, among best themes blogger. In it you will see a modern, elegant, stylish and simple design. In general, all these qualities will help keep the reader on the site.
The only thing you need to know about ExGPress is that it has the most convenient functionality to match social network, which will provide your site with a high percentage of returns. To everything you can add SEO optimization, high speed downloads and a large supply of space for gadgets and advertising. ExGPress was developed specifically for comfortable viewing of content and best interaction with search engines, this is what makes it one of the best blogger templates available today. The other day they added to him new feature, floating sidebars, when scrolling the page down or up, sidebars with widgets move along with the scrolling.
Grid Line is a modern and stylish blogspot template. All its elements are carefully selected, optimized and arranged in such a way as to maximize the reader’s attention on the content. Grid Line was created not only to successfully promote your web resource in search engines, but also to lift the spirits of its users and readers.
Awesome is a set of vector icons. Or rather, a font consisting not of letters and numbers, but of pictures. And these images, since they are essentially a font, can be designed (modified) using CSS styles, set their color, size, shadow and much more. Which you agree is very convenient.
IN currently Font Awesome contains over 1500 free icons!
How to install the Awesome font on a website
In order to use the icons of the Awesome font, you need to download a set of fonts and styles to your website. To do this, go to the official website - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself and download the archive by clicking on the button.
Now connect in sections your site's Awesome styles:
An alternative way to connect Awesome fonts
You don’t have to copy anything to your website, but download all the data from the CDN network. To do this you need to add the following code to the section :
The advantage of such a solution will be more fast speed operation of the site, since the data will be loaded in parallel from different servers (the site - from your hosting, and the fonts - from the Awesome network), in addition, the fonts can already be cached by the browser if you have ever visited sites where they are used.
The downside is that it cannot be used on offline sites (without Internet access) and is dependent on the Awesome CDN network. That's why I usually use the first method.
How to use awesome fonts on a website
Once you have connected the fonts on your website, you can add Awesome icons to your web page in two ways:
- set appropriate classes for elements And ;
- add to the desired element using pseudo elements :before, :after And corresponding value properties content.
Example of using Awesome fonts
For one of the sites I used the following code (for the element used font styles awesome version 4.7.0):
Supply of computer equipment and software
Construction of CCTV and video surveillance systems
Development of access control and management systems
Design and installation of LAN/SCS and telephony
In the browser the result looks like this:
Where to see Awesome icons for the site
If you have letters and numbers printed on your keyboard keys and their use does not cause any difficulties, then regarding awesome fonts there is a question: how can you find out the correspondence between the icon code and its graphic image. For example, what HTML code to use to display an icon Android?
To find out, visit the official website - https://fontawesome.com/icons?d=gallery&m=free
For example, an image Android The following code corresponds:
On the screen it looks like this:
Which version of Awesome fonts is better to use on the site?
The Awesome font is constantly evolving, new icons and their design options are regularly added to it. At the time of writing, version 5 of the font is current. But you can safely use previous editions 4.7.0 or even 3.2.1 on your website. To do this, visit the pages
Loading...
