Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
Adding icons in wordpress has become an essential habit to illustrate a web page or the content of a blog. Nowadays, almost all of us who have a website or a blog use this resource.
The emoticons began as part of the publications on social networks of many of the companies with an online presence.
However, this custom has been spreading until it has become a fundamental part of any website. Moreover, we could say that today a page without icons remains as if it were unfinished.
Similarly, inserting one of them within the buttons or even in the form of emoticons within a text, are visually attractive resources, but also transmit and invite action. Do you want to learn how to do it?
Surely now, you are more curious about inserting icons in WordPress within the menu of your site: in the header, on the contact page or any other visible area within a content.
I’m sure you’ve even seen them in motion. All this can be achieved in a very simple way, as we will see later in this article.
I am going to tell you what types of free icons for WordPress exist, what is the function of each of them and how to add them to this CMS anywhere on your website in a very simple way.
However, first of all I would like us to review its definition together.
What are WordPress icons and what are they for?
The icons for WordPress are small, simple and striking images, which all of us who work on the Internet like so much.
They serve to make your website more visual and more practical. They have always existed and give a different design touch and can even give a break in reading, making it more usable and scannable for the reader.
It is very likely that after seeing a funny one, you will continue reading content that, a priori, is based on a long text and a boring theme. It is a technique that works in most cases.
Icons for WordPress not only serve as part of a success and complement to web design, but are also useful for sharing articles or accessing your social profiles.
You should think of your website as a set of related elements. It is very likely that, at some point, you will need one of them for the website to work, attract, retain and help you sell your products or services.
What types of WordPress icons are there?
Although I will tell you more about it later with explanatory images, in the following video you can see how to insert the different types of icons on your WordPress website:
There are many types of icons for WordPress, among which the following should be highlighted:
The web is full of them, in html format. This page is an endless source of small images that you can use for free on your website.
You can get the ones you like the most, in the size you want and insert them anywhere on your website.
Social networks are a determining factor in the dissemination of your content.
When you publish an article, you have to make it easy for the reader to share your articles on all possible social networks. To do this, it is essential that you insert emoticons of this type to make it easier for them to carry out this action.
Access to social profiles is another factor that should not be missing from your website, since the fact of placing , or even in the menu, always gives an extra visual factor.
Using them, you will have quick access to your social profile accounts on Facebook, Twitter, Whatsapp and Google Plus, among others.
You must choose several sites where you can insert these custom icons in WordPress and thus provide the reader with facilities, so that they can contact you whenever they want.
It is true that, especially when you start with your website, these elements can be a vanishing point in some sectors. Despite this, they are always an important index and channel of relationship with the user who visits you.
These nice images never go out of style and are figures that are still used in texts, articles and comments. They empathize with the user and generate a pause in reading.
Including them in your texts is very easy with a simple adjustment in your WordPress, as you will now see.
How to add icons to your WordPress website?
I am going to explain several ways to place WordPress icons on your website in a very easy way:
Insert Icons in WordPress Using Fontawesome
As I have already mentioned before, Fontawesome provides you with these small images and you can download them for free.
To enjoy them, you just have to download one of the icon plugins in the WordPress repository: “Font awesome 4 menus” or “Better Font Awesome”.
There are templates like Generate Press, which already include the Fontawesome functions, so you don’t need to install the plugin.
Contact your template provider or try to insert the icons and if you see that they are not reflected on your page, install the plugin.
To choose them, you just have to access the Fontawesome page and click on icons. Choose from the huge pack of icons the one you like or select the one you need in the search engine.
Once selected, copy and paste the “iclass”. This will be the one you need, to add it to your website and that image appears.
You can add this code, for example, within each section of the menu. To do this, once you have created your menus, you can insert the code generated in fontawesome before the name (navigation label).
In front of each section of the menu you choose, the selected icon will appear (Example: the house icon for the home page).
Implementing your social icons in WordPress is very simple. With Fontawesome you can also use those of the social networks within the menu, so that whoever wants to can access your social profiles.
This option is especially useful if you don’t want to use any specific plugin for it, since Fontawesome includes simple icons that are just as valid as those that a plugin dedicated to it would provide.
In the same way, if you have some knowledge in CSS, you can give it a hover effect, with which they are somewhat more original.
Using them is very easy: go to “customize menus” and in the “personalized links” option, include the “url” of your social profile and include the icon code provided by Fontawesome in “link text”.
Add this field to the menu and you will have a small access element to your social network.
Adapt your icons anywhere on the web
If what you need is to include icons in another place that is not the menu, you can perfectly do it. You only need one HTML field.
Imagine, for example, that you want to include a small telephone-shaped one in front of the contact section. Doing this is very simple, since it allows you to also include icon codes for WordPress.
If you have a visual editor like Elementor Page Builder, it’s very easy, since you have the html box options and you can adapt the awesome code where you want; if what you want is to adapt it to blog posts, it is simply a matter of including it in the html option.
You can also edit a text or html file and include it there.
Example: if what you want is to add the phone icon, it would be as follows:
(+34) 699 999 999
How can I insert moving icons?
As if all these possibilities had not been few, you can also put them in motion by adding a simple line of code.
If you want, for example, to make that phone also spin, all you have to do is add the following code behind each “fa code”:
- It will look like this adding the fa-spin option:
- If what you want is that the emoticon is also bigger, add fa-3x, fa 4x etc., depending on the size you want:
You can adapt this option with the one you decide. You have more examples and options on the web, being able to add “fa press”, for example doing other types of rotations etc.
As you can see, Fontawesome is simple and very interesting.
Using icons to share your content is essential and you must ensure that your website offers this access easily.
It has happened to me myself that I have not been able to share interesting content, as the website does not have this option or it is somewhat hidden. Therefore, my recommendation is that you make them always visible.
Normally, the plugins designed to fulfill these tasks are very simple to configure, since once you choose the social networks to share your content, it will appear at the end of each post on your blog, giving the user the option to share your posts.
Freemium-like plugins
To share your articles, you can use plugins with a free part (often called “freemium”), such as:
- : simple yet attractive plugin, which provides you with the most important social sharing icons.
- : free social icon plugin with many possibilities, with options of floating bars or “pop ups”. It consumes less resources than the previous ones.
- Payment plugin (limited free version) very visual, with very attractive designs and multiple possibilities such as using all the icons for networks, floating bars (includes the click to tweet plugin to share on twitter)
- : it is a visual layout, that if you are lucky enough to have the pro version, you can do without a social media plugin, since it will be integrated into it.
With “Elementor Pro” you can customize them to your liking, even with colors, shapes or effects, achieving the exact corporate colors of your website.
The way to integrate them in the different parts of the web is very simple, since you can include these icons through an option of the layout designer itself or use a shortcode with which you can insert it at the end of each post, in the place you want, simply cutting and pasting the code.
It is possible to automatically adapt it for all the pages you want, using the wordPress editor or “hooks”. This, although it is not difficult, with the previous option you will have it easier.
free plugin
To insert social profiles you have at your disposal free plugins such as:
- : with this plugin you can add them inside the header of your website, or in any sidebar widgets, etc. It is a very customizable plugin and with the possibility of using your own colors, defining sizes, borders, rounded, etc.
To implement it, it is…
Facebook Comments
Disqus