How To Add Font Awesome Icon to WordPress Sidebar Using CSS

Font Awesome Icon to WordPress Sidebar | Hello friends welcome to Digitalvision Blog, Today I will teach you how to put Font Awesome Icon in the sidebar of a WordPress website.

All bloggers always think that my blog will look different, and if the layout of your blog is different then the visitor who comes once will definitely come a second time if the layout of your site will be user friendly.

I have been blogging for a long time and always try to keep the design of all my blogs different, you can visit my other blog and see like Digitalvision .Add Font Awesome Icon to WordPress Sidebar Using CSS

Add Font Awesome Icon to WordPress Sidebar Using CSS

Today I will teach you how to put Font Awesome Icon in the sidebar of your WordPress website with the help of CSS, then follow the steps below.

Step # 01

First of all you will have to do Integration of Font Awesome Icon in your website, you can do it on two dates from CDN and with Plugin, today I will teach you with plugin, simple you have to put a plugin in your website its name is Font Awesome 4 Menus .

Step # 02

Now you have to copy the simple code that I have given you below and copy that code from here and you have to log in to your wordpress website and paste it in Appearance > Customize > Additional CSS .

Note: If you have not done Integration of Font Awesome Icon in your site, then this Icon will not be a show.

.widget ul {list-style: none;padding: 0;color:#002468;} .widget li {padding-left: 1.3em;font-weight: bold;font-size:18px;} .widget li:before {font-size:16px;content: "\f138";font-family: FontAwesome;display: inline-block;margin-left: -1.3em;width: 1.3em;}

How to change Icon & Color!

If you have changed its icon then you will not have to change its Unicode, Font Awesome is a lot of icons, so if you want to know everyone’s Unicode then you can generate this website by visiting Font Awesome Cheatsheet .

If you do not change the color of the icon, you will have to change the code above: color: # 002468; Replace color: # your-color-code; You have to enter your code which color you like.

Final word

So friends, I hope that you would have liked this information, if you liked it and you feel that it is helpful, then share this post in social media.

If you want to learn blogging, then we have a blog, Digitalvision , in this blog, we teach you about how to bring blogging, SEO, traffic to the blog, then make sure to visit.

You can follow us on social media too! Facebook , Instagram 

Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment

Share via
Copy link
Powered by Social Snap