2 simple Methods to Add Icon Fonts in Your WordPress Theme

Here we are providing the complete overview of how you can add Icon fonts in your WordPress Theme. Icon fonts let you add vector icons without slowing down your site. We will present you the two methods for adding Icon Fonts in WordPress Theme. So let’s see in detail.  

What are Icon Fonts and Reasons for Using Them?

Icon fonts hold pictograms or signs instead of letters and numbers. You are able to resize these pictograms by using CSS without increasing your pages' download size. You can use it for your feature boxes, sliders, social media buttons, shopping cart and in WordPress navigation menus.

Here we have free and open source icon font available including of icons. Each admin toolbar within the admin area. Some other famous icon fonts are - Font awesome, Genericons, Linearicons, IcoMoon. Therefore, we are going to show you the two ways of adding icon fonts in WordPress. First of all, you have to utilize a plugin and the second method will display you adding an icon font without a plugin.

Adding Icon Fonts in WordPress via Plugins

FontAwesome and other free icon fonts are used by many WordPress plugins. By using a plugin You can easily add an icon font to any WordPress theme without editing any code.

First of all, install and activate the Better Font Awesome plugin. Then visit on Setting >>Better Font Awesome page for configuring the plugin settings.

Font Awesome lets you to add font icons using shortcodes as shown below:-

[icon name=”rocket”]

[icon name=”cloud”]

[icon name=”headphones”]

You can also add the icons in post editor by selecting an icon. Move ahead and create a new post or edit an existing one and you will see the Insert Icon button.

Tapping on it will bring up a popup where you can locate an icon and insert it.

Next, you will observe that the plugin will add a shortcode to your post editor which will look like this:

[icon name=”university” class=”” unprefixed_class=””]

You can add your own CSS class for adding custom styles if you want to further customize the icon.

[icon name=”university” class=”universityicon” unprefixed_class=””]

You can style the icon now by using CSS in your theme or child theme stylesheet.

.fa-universityicon {

font-size:100px;

color:#FF6600;

}

Read More: 2 simple Methods to Add Icon Fonts in Your WordPress Theme

You can talk to our WordPress Support team in case of any help related to WordPress, dial + 1 844 897 0441(Toll-Free).

Views: 8

Attachments:

Reply to This

Date/Time

Whazzup-u is a social network for all.

Badge

Loading…

Notes

Serious Spamming Issue

Dear members,

Google has detected serious user-generated spam on our site. Typically, this kind of spam is found on forum pages, guestbook pages, or in user profiles.

Time and time again, it has come to our attention that…

Continue

Created by Kamsan Amin Apr 12, 2016 at 4:39am. Last updated by Kamsan Amin Apr 12, 2016.

User-generated spam

Dear members,

Google has detected user-generated spam on our site. Typically, this kind of spam is found on forum pages, guestbook pages, or in user profiles.

Time and time again, it has come to our attention that there have been a lot of excessive online marketing and spamming activities done on the site. We…

Continue

Created by Kamsan Amin Apr 21, 2015 at 11:03pm. Last updated by Kamsan Amin Aug 19, 2015.

Apply appropriate profile name and photo

Please take note that through our observation we have noticed that some members  have been using inappropriate profile names and photos.Therefore we would like to remind these members to please use proper human names and refrain from using business entity names or products labels. We would also like to advised members not to upload explicit photos, or contents and risked their account being suspended or even deleted. Please keep all contents at PG-13 level so that each and every member can…

Continue

Created by Network Admin May 8, 2013 at 3:32am. Last updated by Network Admin Aug 19, 2015.

Phyto Science Biz

Gofishtalk.com

Dunia Seram

Angler's File

Phyto Science Biz

Whazzup-U Mobile App

App for your Android device.

 

Scan The QR Code To Download

© 2018   Created by Shaipul Bahri.   Powered by

Badges  |  Report an Issue  |  Terms of Service