Can you see my social icons in the left top corner?
They are not an image, they are a font! Awesome font. It is awesome and it is called 'awesome'!
In this post, you will learn how to use this font on your blog and how to use social icons with it!
STEP 1. INSTALL THE FONT.
To install the font, we need to enter the following code below <head>.<link HREF='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' REL='stylesheet'/>
Blogger: Go to Blogger -> Template -> Edit HTML then click anywhere on your HTML code, click CTRL + F, which will open a small search window and type <head>.
BLOGGER ERROR: If after saving your html, the error appears, add </link> after above code - </link> will disappear after saving but will fix the html to make sure no error appears.
WordPress: Go to your dashboard -> Appearance -> Editor. From the list on the right, select Header. Click CTRL + F, which will open a small search window and type <head>.
STEP 2. INSERTING SOCIAL ICONS.
Once the font is installed, we can start using it. Don't skip Step 1 as the font will not work.In order to be able to insert the font, we will need some list of codes to copy html code from. THE LIST IS AVAILABLE HERE (click).
Once you find the symbol you want to use, click on it, this will display the code starting with 'fa-', for example fa-facebook-official
You will also see the full code for the symbol:
<i class="fa fa-facebook-official"></i><a href='LINK-TO-YOUR-SOCIAL-MEDIA-GOES-HERE' target='_blank'><i class='fa fa-twitter'/></i></a>The above code is what you need. Make sure you enter your social media link and you replace fa-twitter with another icon. DON'T DELETE the first 'fa', YOU ONLY NEED TO REPLACE FA-TWITTER, NOT FA FA-TWITTER.
Of course, most of us, will have more than one social icon and you can start inserting above codes one after another without any spacing. To have all social icons centered you can add <center> at the beginning and </center> at the end (after last icon, not after each symbol).
<center><a href='https://twitter.com/mycupofbeautyuk' target='_blank'><i class='fa fa-twitter'/></i></a><a href='http://instagram.com/mycupofbeautyuk' target='_blank'><i class='fa fa-instagram'/></i></a><a href='https://www.facebook.com/pages/My-Cup-of-Beauty/355544494651434?fref=ts' target='_blank'><i class='fa fa-facebook'/></i></a><a href='https://plus.google.com/+mycupofbeauty/posts' target='_blank'><i class='fa fa-google-plus'/></i></a><a href='https://uk.pinterest.com/mycupofbeauty/' target='_blank'><i class='fa fa-pinterest'/></i></a><a href='https://www.bloglovin.com/blogs/my-cup-beauty-13788237' target='_blank'><i class='fa fa-heart'/></i></a></center>
This is how the code should look like (more less) after inserting several social icons. Feel free to copy the code above and replace it with your own links if you want.
STEP 3. MAKING OUR SOCIAL ICONS PRETTY.
Ok,
so we have inserted our social icons. We can now see that they are
small and displayed very close to each other, we now need to add small
piece of CSS code to make them look the way we want.THIS CODE NEEDS TO BE ADDED TO:
Blogger: Go to Blogger -> Template -> Edit HTML and search for ]]> </b:skin> - add the below code ABOVE.
WordPress: Go to Dashboard -> Appearance -> Editor, add the following code to CSS file, make sure to not add it in the middle of another CSS but after } closing the object.
.fa { font-size: 10px; /* size of your social icons */padding-left: 3px; /* gap size - left side */ padding-right: 3px; /* gap size - right side */ color: #000 !important; /* desired color */ } .fa:hover { color: #fff !important; /* social icons color on hover */ }
Any issues? Feel free to comment below and I will try to help asap.
Thanks for stopping by.. Blogger: Go to Blogger -> Template -> Edit HTML then click anywhere on your HTML code, click CTRL + F, which will open a small search window and type . BLOGGER ERROR: If after saving your html, the error appears, add after above code - will disappear after saving but will fix the html to make sure no error appears. WordPress: Go to your dashboard -> Appearance -> Editor. From the list on the right, select Header. Click CTRL + F, which will open a small search window and type .
0 comments:
Post a Comment