Earlier in 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'] } } 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-4xto 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/