Tuesday, March 17, 2020

How To Customize Font Awesome Social Sharing Icons With Css

In earlier post we discussed all about installation of latest version of font awesome in blogger. It is a wide platform for using all type of icons in order to make your site more colorful in two steps. First add style sheet in head section of template & secondly pick desired code of any icon and you are done. For better understanding we recommend take a brief look on links. Now this time to installation of social icons from font awesome like Facebook, Youtube, Google plus, Twitter, etc. As we know that social platforms play a healthy role in the popularity of a blog or website. So give a way to users where as they share your work with this manner. Cleanly, good looking while seeing, and clear navigation all these types of things play a vital role in your famed. So let’s get start.


Add font awesome social Icon:

Font awesome social icons offering you to customize, or modified symbols using Css. It is upon you which type of techniques you may utilize for the sake of customizing. If any one familiar with basics of HTML & CSS then this is very easy to add your own taste. But if you are in beginner stage then doesn’t matter. Only read this tutorial for implementation. For simplicity this lesson is split in two parts in First part we learn addition of these social icons with internal style of CSS or Compound method. While in second fraction this installation will be as a separate stylesheet. Before Starting See

Internal type of Css applying social Icons:

It is important before starting the entire process you have some know how about blogger template. Well-known of adding gadgets in blogger blogs have a bonus for you.
 Go to blogger Dashboard > Layout > Add a gadget > insert HTML java sript widget.

Copy the entire code and paste it to in content section of selected widget. Enter a suitable title. Click the orange save button. Reload page you are done.

Adding font awesome icons second part;

It is necessary that if you know about blogger template editing and backup process then choose this step. Alternatively use internal type method described above. If yes then proceed forward. Go to Template > Edit HTML > search for this piece of code ]]></b:skin> just above it paste following coding of Css.

Save Template. You are half done using second method. Go a head and simply repeat first step process and in HTML java script paste these font awesome icons codes.

Save everything refresh whole page. Congratulates…Enjoy new way of social sharing icons for blogger and site.

Notice:

Before applying any method or editing template make sure you have installed font awesome stylesheet. Otherwise read this article first.

Customize your own way:

Replace the orange  #   sign with your link page. For example in fa fa-facebook add links in the form of
 "https://www.facebook.com/yourname" etc.
Place rel="nofollow" tag in font of every link then for SEO concerns. More over you can change
background-color: #000; border: medium outset #0F0; color: #000; with your own custom clours. Otherwise remain default.

Need Help:

Don't tackle then tell us we feel proud to help you. 

No comments:

Post a Comment