Tags: Beginner's Guide / CSS Tricks

How to Add CSS Codes to Blogger Using Template Designer

- 2 Comments

Planning to customize your blog's look using CSS? But having difficulties adding CSS to your blog? We know that customization of blog is not possible without CSS. So, what to do now? Don't worry, here's a short guide on adding CSS codes to blogger. Some bloggers found it difficult to locate ]]></b:skin> tag for adding CSS codes to blogger. So, today we are going to share a short, simple and easy guide on adding CSS codes to blogger without using the Template HTML Editor.

How to Add CSS Codes to Blogger Using Template Designer

Step 1. Log in to your Blogger Account
Step 2. Select a Blog that you want to Customize
Step 3. Go to Template and click on Customize button

Step 4. Click on Advance and add you CSS Code

Step 5. Finally click on Apply to Blog and you're done!
Note:
When you are adding the CSS Codes then be careful that you have to add the CSS without <style type="text/css"> and </style> tags and adding these may result in an error. On changing the template these CSS Codes will be removed.

How to Customize Font Awesome Icons in Blogger

- 5 Comments

Font awesome are vector icons that can be used on any webpage. It is a set of SVG (Scalable Vector Graphics) Icons which means every icon looks awesome at any size. One of feature of Font Awesome icons is that these icons are easily customizable with CSS. Recently we've talked about How to Use Font Awesome Icons in Blogger and today we are going to discuss that How to Customize Font Awesome Icons in Blogger. So, let's come to the point

How to Use Font Awesome Icons

Simply: Choose an icon >> Note down its class name >> Use  tag >> Add it to your Blog. Example:

You can use these icons anywhere you want. e.g. Navigation menu, Side bar or anywhere you want in your template. You can view a list of available icons in Font Awesome Inventory here.
Visit this Link How to Use Font Awesome Icons in Blogger.

Resizing Icons

You can resize font awesome icons by using fa-lg, fa-2x, fa-3x, fa-4x and fa-5x. Check the examples below that how it works.

Customize Icons using CSS

You can also customize font awesome icons by applying CSS. Using CSS you can customize shadows, size, color and more.

.fa-envelope {
font-size: 16px;
color: #000;
padding: 5px;
border: 1px solid #ccc;
float:left;
}

You can replace the highlighted text with the class of any other icon and then customize it

Spinning Icons

You can spin font awesome icons by using fa-spin. Look at the examples below:









Rotate and Flip Icons

Just like spinning and resizing you can rotate these icons using fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-vertical and fa-flip-horizontal.











Stacking Icons

You can also stack two or more icons to create a new icon fa-stack or fa-stack-2x or fa-stack-3x for large icons. Example

Result:

Result:

List Icons

Replace bullets and numbering using fa-ul and fa-li tags. Exapmle

Minus Circle
Star Icon
Spinner Icon
Share Square

<ul class="fa-ul">
<li>Minus Circle</li>
<li>Star Icon</li>
<li>Spinner Icon</li>
<li>Share Square</li>
</ul>

From Editors Desk

We hope this article helped you in customizing font awesome icons for your blog. Share this article with your friends and don't forget to subscribe us. Feel free to ask. Your feedback is always highly appreciated.