How To Add Together Font Awesome Social Icons Inwards Blogger

It's most impossible to discovery a spider web log or site these days without at to the lowest degree i social media delineate organization human relationship to their name. Be it Twitter or Facebook, Instagram or Pinterest, or all of those for that matter, what's locomote increasingly clear is that social media helps increment your online presence.

Gone are the days when y'all used to rely on adept quondam search engine results alone. These days, mayhap y'all don't rank good inwards results for your keyword on Google or whatever other search engine, but y'all tin launch a social media drive that tin hopefully plough over y'all the results that y'all want.

Essentially, your site in addition to social media demand to co-exist. One cannot alive without the other, if y'all desire around other way of putting it. Social media is i of the best drivers of traffic on the internet, in addition to if y'all desire to increment your chances of beingness seen, so y'all possess got got to acquire an delineate organization human relationship on i or to a greater extent than platforms every bit long every bit it fits alongside your brand's identity.

Spreading Awareness of Your Social Media Presence

Once you've laid upward your social media accounts, y'all don't only locomote out it at that topographic point to locomote discovered. Sure, y'all tin make usage of hashtags in addition to communicate alongside manufacture leaders, but that's non plenty to convey awareness to your customers. To allow them know y'all possess got a presence on Facebook, Twitter, Instagram, Vine or Pinterest, y'all possess got to build usage of the existent estate on your website.

How just exercise y'all exercise that, y'all ask? Well, past times way of social icons.

Social icons are those piffling images y'all come across that stand upward for a symbol associated alongside a detail social network. For example, social icons for Twitter commonly characteristic a bluish bird. If non that, so a lowercase missive of the alphabet T.

The presence of these images remind your viewers that they possess got other ways of beingness upward to appointment alongside whatever y'all position out. Social media usage is pretty high these days thank y'all to the immediacy of the medium every bit good every bit the fun factor. And to a greater extent than probable than not, your audience would desire to know whether you're on whatever social network.

If you're on the Blogger platform, y'all tin add together these social media representations through Font Awesome social icons.

What is Font Awesome?

Font Awesome "gives y'all scalable vector icons that tin similar a shot locomote customized - size, color, driblet shadow, in addition to anything that tin locomote done alongside the ability of CSS". In essence, it functions every bit a toolkit where y'all acquire access to to a greater extent than than 500 icons for usage on your site - gratis of charge.

Now, if you've used social media icons before, y'all know that at that topographic point are non-vector varieties. But those offered past times Font Awesome are scalable vector icons, in addition to inwards the long run, they are the meliorate selection for your site.

Why is that the case?

Well, a real adept argue would locomote that images possess got fourth dimension to load. Yes, these images are tiny but the signal nevertheless stands. Plus, images tend to lose their lineament every bit calculator resolution increases. In other words, if y'all desire your icons to charge faster in addition to possess got a nice, crisp in addition to build clean look, so you're meliorate off alongside using the collection of Font Awesome. Also, the adventure to customize your icons accordingly is definitely an attractive factor too.

Why y'all should start using Font Awesome?

Of the many providers out there, why stick alongside Font Awesome?

Large collection of icons. You'll non only discovery social media icons here, but other traditional icons every bit well.
CSS support. With CSS, y'all tin accommodate the icons according to what suits your site best. You tin tinker alongside the colors, size, shadows in addition to other components. This is something sorely lacking alongside non-vector images because you're stuck alongside the icon y'all chose.
Speed. Vector images are lightweight in addition to thus charge faster.
Free. You don't possess got to pay a unmarried thing when y'all usage Font Awesome.

So at nowadays y'all know the importance of icons on your site, it's fourth dimension to acquire how to add together Font Awesome icons inwards Blogger.

Adding Font Awesome Social Icons inwards Blogger

The adding of icons to your Blogger isn't rocket science. In fact, the procedure is pretty straightforward.
Here's what y'all possess got to do:

Add Font Awesome Stylesheet into Blogger

Follow the steps below to acquire Font Awesome working alongside your blog:

1. Open your Blogger dashboard, locomote to Template in addition to press the Edit HTML button.
2. Click anywhere within the code expanse in addition to press CTRL + F keys to opened upward the search box.
3. Type the <head> tag within the search box in addition to press Enter to discovery it.

4. Add the next delineate of code referencing the location of the font-awesome.min.css stylesheet only below the <head> tag:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

5. Click the 'Save template' push to relieve the changes in addition to start playing alongside Font Awesome!

Using the Font Awesome Icons

After y'all acquire the steps inwards the previous department done, you're at nowadays ready to usage Font Awesome inwards your blog. The start thing y'all demand to exercise is add together the social icons links to the HTML in addition to delete the icons that y'all don't demand anymore. This is a sample HTML that y'all tin add:

<div id="fawesomeicons">
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
</div>

In the higher upward HTML code, nosotros tin come across 8 dissever social icons which tin locomote recognized past times looking at the link championship attribute. For example, the start i is for Facebook.

To usage the social icons, glue your URL where it says URL-HERE for each social icon y'all desire to include. Put the link betwixt the quotes in addition to build certain to non take away whatever of the quotation marks.

If y'all desire to take away a social icon, only delete that delineate of code starting alongside "<a href" in addition to ending alongside "</a>".

Now, continue inwards heed that Font Awesome industrial plant anywhere alongside the  tag every bit it was designed to piece of job alongside inline elements. Although y'all tin usage , official documentation prefers the  selection for brevity.

Font Awesome icons tin locomote placed anywhere using the CSS prefix fa together alongside the get upward of the icon. For a list of social media icon names, y'all tin refer to the official website of Font Awesome.

Let's say that y'all desire to display a Youtube icon so y'all tin link it to your official delineate organization human relationship on the platform. Find the Youtube icon on the listing in addition to click on it:

That volition convey y'all to a page for Youtube where y'all volition come across this code:

To include the icon within the list, re-create whatever delineate starting alongside "<a href" in addition to ending alongside "</a> from the code above, glue where y'all desire it to appear in addition to supersede the code starting alongside "" alongside that of your chosen icon.

Finally, afterwards adding the icon, the listing volition await similar this:

<div id="fawesomeicons">
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
<a href="URL-HERE" title="How to Add Font Awesome Social Icons inwards Blogger" target="_blank" rel="nofollow"></a>
</div>

Note: don't forget to alter the championship in addition to add together your URL betwixt the quotes.

Once you've finished editing the icons, insert the code into a HTML/Javascript gadget past times going to "Layout" in addition to click on the "Add a gadget" link. If you're using WordPress, glue it inwards a Text widget.

Customize the Font Awesome Icons Using CSS

Suppose y'all desire to build the icons a lot bigger than they currently are. That chore is made elementary alongside the usage of CSS. Here's a sample code:

#fawesomeicons a {
   font-size: 16px;
   width: 30px;
   height: 30px;
   line-height: 30px;
}

To alter the font size, increment or decrease the 16px value. Below are the values (30px) for the container's width in addition to pinnacle which should e'er match. Increasing/decreasing these values, volition increase/decrease the size of the container where is the font.

Here are around unlike styles for the font awesome social icons. In the CSS, await for the #background-color, #border-color, #font-color in addition to #hover-color text so that y'all tin know hither to position the color codes. You tin usage this tool to generate the color code: Color Code Generator. If y'all don't know how to add together CSS, follow this tutorial.

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px enterprise #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px enterprise #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
color: #font-color;
display: inline-block;
font-size: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}

Now, what if nosotros desire to alter the background or font color of a specific icon? First, nosotros demand to position the icon degree which is only afterwards the <i class="fa ..." in addition to add together it similar this:

#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}

Here, nosotros tin alter the background in addition to color for the Facebook icon but nosotros tin exercise it for whatever icon y'all want. For example, let's add together around other dominion for the twitter icon:

#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
#fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}

To build the fonts bigger, nosotros tin add together the CSS code similar this:

#fawesomeicons {
text-align: center;
}
#fawesomeicons a .fa{
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
}
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
#fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}

To apply, re-create the code higher upward in addition to add together the CSS dominion alongside the icon degree that y'all wishing to change.

Important: When adding the degree for your icon, e'er position a dot (.) inwards forepart of it every bit y'all tin come across inwards the illustration above, otherwise it won't work.

And that's it! Hopefully, this tutorial helped y'all to add together Font Awesome social icons inwards Blogger. If you're nevertheless inwards problem adding them, delight possess got a await at Examples page.