Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Blogr-AMP (V2) Display Icons with Font Awesome

Blogr-AMP (V2) Display Icons with Font Awesome
Theme Version: 2-0-0

Over 500 Font Awesome icons is included with Blogr-AMP Blogger template with Accelerated Mobile Pages HTML hosted by MaxCDN -- Content Delivery Network.

Earlier in Blogr-AMP V1, this theme uses Material icons powered by Google Fonts. However, due to the many request by users (we heard you!), we opted out of this font library & use Font Awesome web icons instead.

Font Awesome icons are beautifully crafted, delightful, & easy to use in your web, Android, and iOS projects. Learn more about Font Awesome icons in their Getting Started guide and view all available icons to choose at their Icons selection page.

Add icons to your blog made easy!

Free Blogger Theme with AMP use Font Awesome CSS Toolkit

Location


Template HTML - amp-custom

Font Library (Theme Edit HTML - Mobile View)

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

Font Library (Layout Web Fonts - Web View)

  WebFontConfig = {
    custom: { families: [ 'FontAwesome' ],
       urls: [ 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'] 
    }
  }

Font style

available with font CSS file above.

Behavior



  • Displays web icons using Font Awesome icons application & methods.
  • Add fa fa-* class name to any <i> or <span> DOM element to display icons of choice.
  • Apply class name fa-lg, fa-2x, fa-3x & fa-4x to re-scale icons in proportion to text/font size.

Example Usages


An example mark-up use with preferred <i> or <span> tag.

<i class='fa fa-*'></i>

OR

<span class='fa fa-*'></span>

Replace * with the assigned Font Awesome icons identifier.

Working environment usages

<i class="fa fa-android"></i> or <span class="fa fa-android"></span>

Displays this icon:

Icons Sizing

<i class="fa fa-android fa-2x"></i> or <span class="fa fa-android fa-2x"></span>

Displays this small sized icon:

<i class="fa fa-android fa-2x"></i> or <span class="fa fa-android fa-2x"></span>

Displays this medium sized icon:

<i class="fa fa-android fa-4x"></i> or <span class="fa fa-android fa-4x"></span>

Displays this larger sized icon:

Apply Icons



Use HTML tags

  • Go to Font Awesome webpage: http://fontawesome.io/icons/
  • Search for your icons.
  • Get the icons identifier.
  • At your blog page HTML Mode - add the markup <i class="fa fa-{{identifier}}"><i> .
  • Save your work.

Use CSS ::after/::before Pseudo


  • Go to Font Awesome webpage: http://fontawesome.io/icons/
  • Search for your icons.
  • Click on the icons to view the icons references.
  • Get the icons uncode ie f17b (for Andorid icon)
  • Go Theme > Edit HTML find <amp-custom> tag and add below CSS:-

Displays icon before an element HTML element:-

.your-classname {
  before: '\f17b';
  font-family: 'FontAwesome';
}

Displays icon after an element HTML element:-

.your-classname {
  after: '\f17b';
  font-family: 'FontAwesome';
}

  • click Save Theme

Download Free AMP HTML Blogger Theme with Font Awesome Icons

Useful Reference


Font Awesome icons selection - http://fontawesome.io/icons/
Font Awesome Getting Started guide - http://fontawesome.io/get-started/

Blogr-AMP Blogger AMP HTML Template Rated 5/5 based on 98 reviews Blogger AMP HTML themes integration use Font Awesome iconic fonts add web icons easily using simple HTML on any Blogger pages/posts Blogr-AMP theme includes pre-assigned icons size classes to re-size icons accordingly. Blogr-AMP: Blogr-AMP (V2) Display Icons with Font Awesome
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Over 500 Font Awesome icons is included with Blogr-AMP Blogger template with Accelerated Mobile Pages HTML hosted by MaxCDN  -- Content Deli....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Contact Us