Wordpress Icons
See how easy it is to add icons fonts to your Wordpress Theme
Below you will find instructions on how to add icons to your project using 3 different ways such as:
- Installing the finished package
- Manually through code
- By using plugins
Getting Started
What are Icon Fonts and Why You Should Use Them?
Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily added to website content and resized using CSS. Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed.
Icon fonts can be used to display commonly used icons. For example, you can use them with your shopping cart, social media buttons, profile informations, hamburger-menu, and even in multiselect.
There are several free and open-source icon fonts available that has hundreds of beautiful icons. In fact, Wordpress has its own free dashicons icon font set. These icons are used in the WordPress admin menu and other areas inside WordPress admin area.
Some other popular icon fonts are:
How to add Icons?
You can add icons in many different ways, below are 3 ways to add Icons into your project:
Add Icon Fonts with one click
Use Icons in Wordpress immediately after installation. One of the easiest ways to use icons is to install Wordpress with the appropriate icon pack.
By installing Wordpress via mdbgo, you immediately install the appropriate icon pack and you can directly use this icon listing immediately after installation
Create WordPress with single click!
One click setup
MDB GO allows you to create a WordPress page with a single click. Regardless whether you want to create a Travel Blog or an E-commerce shop to sell your product you can easily do that. You can even combine both into single page.
Crate and deploy WordPress theme
Local setup
Although this is not mandatory we strongly encourage you to setup your local WordPress instance. If you don't know how to that we have prepared for you separate tutorial.
Assuming that you have your WordPress installed locally navigate to
wordpress_location/wp-content/themes
and run the following command:
$ mdb init
This will show you list of available starters. Choose from the list either
MDB starter or Empty starter. Empty starter is an empty
boilerplate without any libraries while MDB starter includes MDB starter and allows you to
use one of the thousands
MDB5 components.
Publish
Once your theme is ready you can publish it to web using the following command:
$ mdb wordpress publish
CLI will ask you about your project name and email. After that MDB GO will create and configure for you everything - database, wordpress, configuration and theme. You will be shown your admin login and password.
Note: Remember to store your username and password. This is the only time when they are displayed. If you want to change your password login to your WordPress instance and edit profile.
Adding Icon Fonts in WordPress Manually with Code
Some icon fonts like Font Awesome, are available from CDN servers across the web and can be linked from your WordPress theme directly.
You can also upload the entire font directory to a folder in your WordPress theme and then use those fonts in your stylesheet.
Method 1 - directly linked from CDN servers
This manual method is quite easy.
First, you need to visit the Font Awesome website and enter your email address to get the embed code.
Now check your inbox for an email from Font Awesome with your embed code. Copy and paste this embed code
in
your WordPress theme’s header.php file just before the </head> tag.
Your embed code will be a single line that will fetch the Font Awesome library directly from their CDN servers. It will look something like this:
Method 2 - host the Font Awesome icon fonts on your own website.
It is not the easiest option, but it would allow you to host the Font Awesome icon fonts on your own website.
First, you need to visit the Font Awesome website to download the font package to your computer.
Simply download the icon fonts and unzip the package.
Now, you will need to connect to your WordPress hosting using a FTP client and go to your WordPress theme’s directory.
You need to create a new folder there and name it fonts. Next, you need to upload the contents of the icon fonts folder to the fonts directory on your web hosting server.
After taht you are ready to load icon fonts into your WordPress theme. Simply add this code to your
theme’s
functions.php file or in a site-specific plugin.
function custom_load_fa() {
wp_enqueue_style( 'custom-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_load_fa' );
You have successfully loaded Font Awesome into your WordPress theme.
Now comes the part where you will be adding actual icons into your WordPress theme, posts, or pages.
Manually Displaying Icon Fonts in WordPress
Go to the Fonts listing to see the full list of icons available. Click on any icon you want to use, and you will be able to see the icon name.
Copy the icon name and use it like this in WordPress.
You can style this icon in your theme’s stylesheet like this:
.fab fa-amazon {
font-size:50px;
color:#FF6600;
}
Adding Icon Fonts using Plugins
The method below is best for beginners who want to add icons to their posts or pages. With this method you wouldn’t have to modify theme files, and you would be able to use icon fonts everywhere on your website.
First thing you need to do is install and activate the Font Awesome plugin for WordPress.
Upon activation, the plugin enables Font Awesome support for your theme. You can now edit any WordPress post or page and use icon shortcode like this:
[icon name=”rocket”]
You can use this shortcode along with other text or by itself in a dedicated shortcode block.
Once added, you can preview your post or page to see how the icon will look on a live site. Here is example how it should look like.
Using the FontAwesome plugin, you can search for icons directly on the website and add them to the content
You will need to click the preview button on your post or page to see how the actual icon size would look.
Icon Listing