It’s almost impossible to uncovering a weblog or site these days without at to the lowest degree 1 social media describe organisation human relationship to their name. Be it Twitter or Facebook , Instagram or Pinterest , or all of those for that affair , what’s move increasingly clear is that social media helps increment your online presence.
Gone are the days when yous used to rely on practiced one-time search engine results alone. These days , perchance yous don’t rank good inwards results for your keyword on Google or whatsoever other search engine , but yous tin laissez passer the axe launch a social media motility that tin laissez passer the axe hopefully laissez passer yous the results that yous want.
Essentially , your site as well as social media demand to co-exist. One cannot alive without the other , if yous desire roughly other way of putting it. Social media is 1 of the best drivers of traffic on the network , as well as if yous desire to increment your chances of beingness seen , so yous take hold got to acquire an describe organisation human relationship on 1 or to a greater extent than platforms every bit long every bit it fits amongst your brand’s identity.
Spreading Awareness of Your Social Media Presence
Once you’ve laid upward your social media accounts , yous don’t simply acquire out it in that location to move discovered. Sure , yous tin laissez passer the axe make exercise of hashtags as well as communicate amongst manufacture leaders , but that’s non plenty to convey awareness to your customers. To allow them know yous take hold a presence on Facebook , Twitter , Instagram , Vine or Pinterest , yous take hold to construct exercise of the existent estate on your website.
How precisely do yous do that , yous ask? Well , past times way of social icons.
Social icons are those footling images yous meet that correspond a symbol associated amongst a detail social network. For illustration , social icons for Twitter normally 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 take hold other ways of beingness upward to engagement amongst whatever yous pose out. Social media exercise is pretty high these days cheers to the immediacy of the medium every bit good every bit the fun factor. And to a greater extent than probable than non , your audience would desire to know whether you’re on whatsoever social network.
If you’re on the Blogger platform , yous tin laissez passer the axe add together these social media representations through Font Awesome social icons.
What is Font Awesome?
Font Awesome “gives yous scalable vector icons that tin laissez passer the axe directly move customized – size , color , driblet shadow , as well as anything that tin laissez passer the axe move done amongst the ability of CSS”. In essence , it functions every bit a toolkit where yous acquire access to to a greater extent than than 500 icons for exercise on your site – complimentary of charge.
Now , if you’ve used social media icons earlier , yous know that in that location are non-vector varieties. But those offered past times Font Awesome are scalable vector icons , as well as inwards the long run , they are the improve selection for your site.
Why is that the case?
Well , a real practiced argue would move that images accept fourth dimension to load. Yes , these images are tiny but the request all the same stands. Plus , images tend to lose their character every bit reckoner resolution increases. In other words , if yous desire your icons to charge faster as well as take hold a squeamish , crisp as well as construct clean expect , so you’re improve off amongst using the collection of Font Awesome. Also , the risk to customize your icons accordingly is definitely an attractive factor too.
Why yous should start using Font Awesome?
Of the many providers out in that location , why stick amongst Font Awesome?
- Large collection of icons. You’ll non only uncovering social media icons hither , but other traditional icons every bit well.
- CSS support. With CSS , yous tin laissez passer the axe adapt the icons according to what suits your site best. You tin laissez passer the axe tinker amongst the colors , size , shadows as well as other components. This is something sorely lacking amongst non-vector images because you’re stuck amongst the icon yous chose.
- Speed. Vector images are lightweight as well as thence charge faster.
- Free. You don’t take hold to pay a unmarried thing when yous exercise Font Awesome.
So at nowadays yous 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 yous take hold to do:
Add Font Awesome Stylesheet into Blogger
Follow the steps below to acquire Font Awesome working amongst your blog:
- Log into your Blogger dashboard , so move to Theme as well as press the Edit HTML button.
- Click anywhere within the code expanse as well as press CTRL + F keys to opened upward the search box.
- Type the tag within the search box as well as press Enter to uncovering it.
- Add the next describe of code referencing the location of the font-awesome.min.css stylesheet simply below the tag:
- Click the ‘Save theme’ push clitoris to relieve the changes as well as start playing amongst Font Awesome!
Using the Font Awesome Icons
After yous acquire the steps inwards the previous department done , you’re at nowadays ready to exercise Font Awesome inwards your blog. The get-go thing yous demand to do is add together the social icons links to the HTML as well as delete the icons that yous don’t demand anymore.
This is a sample HTML that yous tin laissez passer the axe add:
In the higher upward HTML code , nosotros tin laissez passer the axe meet 8 divide social icons which tin laissez passer the axe move recognized past times looking at the link championship attribute. For illustration , the get-go 1 is for Facebook.
To exercise the social icons , glue your URL where it says URL-HERE for each social icon yous desire to include. Put the link betwixt the quotes as well as construct certain to non take whatsoever of the quotation marks.
If yous desire to take a social icon , simply delete that describe of code starting amongst ““.
Now , maintain inwards hear that Font Awesome industrial plant anywhere amongst the tag every bit it was designed to piece of employment amongst inline elements. Although yous tin laissez passer the axe exercise , official documentation prefers the selection for brevity.
Font Awesome icons tin laissez passer the axe move placed anywhere using the CSS prefix fa together amongst the refer of the icon. For a list of social media icon names , yous tin laissez passer the axe refer to the official website of Font Awesome.
Let’s say that yous desire to display a Youtube icon so yous tin laissez passer the axe link it to your official describe organisation human relationship on the platform. Find the Youtube icon on the listing as well as click on it:
That volition convey yous to a page for Youtube where yous volition meet this code:
To include the icon within the listing , re-create whatsoever describe starting amongst “ from the code higher upward , glue where yous desire it to appear as well as supersede the code starting amongst “” amongst that of your chosen icon.
Finally , later adding the icon , the listing volition expect similar this:
Note: don’t forget to alter the championship as well as 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” as well as 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 yous desire to construct the icons a lot bigger than they currently are. That chore is made unproblematic amongst the exercise 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 as well as pinnacle which should ever match. Increasing/decreasing these values , volition increase/decrease the size of the container where is the font.
Here are roughly dissimilar styles for the font awesome social icons. In the CSS , expect for the #background-color , #border-color , #font-color as well as #hover-color text so that yous tin laissez passer the axe know hither to pose the color codes. You tin laissez passer the axe exercise this tool to generate the color code: Color Code Generator. And if you’re non familiar amongst CSS , delight meet 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 company #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 company #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 flat which is simply later the
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;
}
Here , nosotros tin laissez passer the axe alter the background as well as color for the Facebook icon but nosotros tin laissez passer the axe do it for whatsoever icon yous want. For illustration , let’s add together roughly other dominion for the twitter icon:
Advertisement. Scroll to continue reading.
#fawesomeicons a .fa-facebook {
background: #background-color;
color: #font-color;}
#fawesomeicons a .fa-twitter {
background: #background-color;
color: #font-color;
}
To construct the fonts bigger , nosotros tin laissez passer the axe add together the CSS code similar this:
Advertisement. Scroll to continue reading.
#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 as well as add together the CSS dominion amongst the icon flat that yous want to change.
Advertisement. Scroll to continue reading.
Important: When adding the flat for your icon , ever pose a point (.) inwards front end of it every bit yous tin laissez passer the axe meet inwards the illustration higher upward , otherwise it won’t work.
And that’s it! Hopefully , this tutorial helped yous to add together Font Awesome social icons inwards Blogger. If you’re all the same inwards problem adding them , delight accept a expect at Examples page.
