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!

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

Useful Reference

---

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