How to use Font awesome icons as a bullets WordPress

Posted by on

Share this

Font awesome icons  as a bullets WordPress

Font awesome icons as a bullets WordPress

 

Have you ever wondered to change the bullet style of your WordPress theme. Here are some reasons why to do this-

It looks cool, isn’t it ?

Targeting content

Categories

Social friendly

Incredibly awesome

Github : Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Font awesome icons have became very popular across the web. Its styles and designs are incredibly awesome. This icons by Github is made of fonts. These are not really icons they’re animated fonts. It is supported by almost every browser even IE’s (Internet Explorer). It is very popular among the coders and developers. The new WordPress themes are fully integrated with the font awesome icons. Font Awesome has a vibrant community of folks helping each other out. You can get support, report bugs, request new icons, submit pull requests, and check upcoming creations.

Also read: How to add pagination in WordPress

You can easily integrate a font awesome icon in your WordPress or any other websites (HTML). If you’re code friendly folk, then you can add font awesome icons to your website by adding this code (given below) in the <head> section of your header or index file.

WordPress users can also add this by doing the same procedure above. Go to your Appearance> editor> header.php> (paste it below the<head> section). This will add the font awesome CSS library to your website and then you can use the font awesome icons on your website.

You can also learn to use font awesome icons on the official font awesome icons website’s example page.

🙂 Guess what ! We have done with the major step involved in adding the font awesome to your website. Now lets learn how to use Font awesome icons  as a bullets in WordPress. Follow these simple steps.

1. Go to Appearance> editor> style.css of your WordPress theme. Find the <ul> section in your style.css file. If you have found that, it must be looking like this..

2. I have written the classes as <your list class>. Your’s may depend on your theme. If your theme is displaying the bullets as a circle it will be written as {list style: circle} or if the square then vice versa. All you have to do is just replace the circle or square with “none”. The resultant code will look like this..

3. In this line <ul> represents un-ordered list ( i.e bullets ). Now you have disabled the current style of your bulleted or un-ordered list. So lets replace your style of bullets. Add the following code to your style.css file in WordPress. Consider adding this in the last line.

4. The first line in this code represents that “add this before every un-ordered list contents”. The code f0a4 is a css content value of the hand-o-right icon, which is my default bullet. You can replace it with your icon’s content values. Check your icon’s content values here. Don’t forget to replace the “.your list class” with your un-ordered list class. Anyway, every theme has their different CSS classes.

Congrats ! You’ve successfully replaced your bullets in an un-ordered list with a font awesome icons. This is a little creepy method. If you have any doubts or uncertainty please use my comment box. Go down there and get solved all your problems related to this topic. If you want make this method more easy please let me know.

You can also use a plugin if you’re a WordPress user. Font awesome icons are one of the main element of Bootstrap. And there is a free WordPress shortcode plugins to use these features. (Hint: Use ultimate shortcodes plugin for better performance) It may help you in..

  • Setting different icons in each category
  • Adding icons individually
  • Creating a beautiful content
  • Maintaining your SEO

Also read : How to write an SEO friendly blog posts

Font awesome icons  as a bullets WordPress

Font awesome icons  as a bullets WordPress

Font awesome icons  as a bullets WordPress

 

Last updated: April 3, 2016

Authored by :

Hi ! I'm Prakhar Shrivastav, currently a final year BSc student and a co-founder of 3nions. I love spending quality times on Web development, Graphic designing, and SEO.

Leave a Reply