How to Include Icons on Store Locator WordPress

Users can use the “Font Awesome” plugin for WordPress to add a huge library of vector icons to their store locator. Furthermore, the Font Awesome plugin can be downloaded from the following WordPress website.

Font Awesome is a plugin for WordPress that will allow users to add a variety of website-friendly vector icons (social media, currency, shipping, items, etc.) to their store locator.

The advantage of vector icons (which Font Awesome provides) is that they are small in size, fast to load, and can be scaled without loss of resolution.  Therefore, Font Awesome can add some really clear and sharp icons to your store locator.

There are two main benefits of installing the Font Awesome plugin. Firstly, it is free. Secondly, it’s very easy to install. Moreover, once you have Font Awesome installed you will be able to directly apply icons from their library using either shortcodes or HTML snippets. In addition, you will also be able to change the font attributes (size, color, etc.) using CSS.

Installing Font Awesome

There are two ways to Install Font Awesome:

1- The Font Awesome Plugin for WordPress

WordPress users can easily use Font Awesome by installing the official Font Awesome plugin on WordPress. 

Once you have the plugin installed you will be able to add font icons to your website using shortcodes or HTML snippets. Furthermore, to add a specific icon to your website, you can always check Font Awesome’s List of Icons.

2- Manual Installation

The second, more complex, way of installing Font Awesome on your website is through a manual installation that requires adding a code snippet in the header file of your theme.

To install Font Awesome manually please follow the below steps:

1. Go to the following website to get the Font Awesome (version 6) CDN code

2. Copy the below link tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

3. Go to “Appearances” on WordPress, and select “Theme File Editor”
4. Select the “header.php” file in the theme editor 
5. Paste the above code before the </head> closing tag

6. Click on “Update File”

Once this is done you will be able to use Font Awesome right away.

How to Add Font Awesome Icons on Agile Store Locator

Now that you have Font Awesome installed it’s time to learn how to actually place icons.

Users of Agile Store Locator can easily apply Font Awesome icons on their store list or infobox using the “customizer” section in Agile Store Locator.

To add font icons on Agile Store Locator please follow the below steps:

1. Go to “ASL Settings” on Agile Store Locator
2. Go to the “Customizer” tab
3. Choose your template type from the “Template” drop-down menu
4. Choose where you want to put the icons (list/ infobox) from the “Section” drop-down menu
5. Click on “Load Template” to bring up the HTML script
6. Go to the Font Awesome website to select a code for an icon. For example, the below code is used to add a “Facebook” icon:

<i class="fa-brands fa-facebook"></i>

7. Insert the code in the “Template Editor”
8. Click on “Save Template”

The above screenshot shows the code for icons (Facebook, Instagram, Twitter) wrapped in custom code for social media buttons. A similar code is given below.

<div class="row-flex mt-2">
      {{if facebook_url}}
      <div class="col-flex"><a href="{{:facebook_url}}" class="btn btn-asl"><i style="color:#FFF;" class="fa-brands fa-facebook"></i></a></div>  
      {{/if}}
      {{if twitter_url}}
      <div class="col-flex"><a href="{{:twitter_url}}" class="btn btn-asl"><i style="color:#FFF;" class="fa-brands fa-twitter"></i></a></div>  
      {{/if}}
      {{if instagram_url}}
      <div class="col-flex"><a href="{{:instagram_url}}" class="btn btn-asl"><i style="color:#FFF;" class="fa-brands fa-instagram"></i></a></div>  
      {{/if}}
</div>

Once you save the template the icons will appear on either the store list or the infobox of the store locator. In addition, you can even modify the icon code to change the size or color of the icon.

Now that you have Font Awesome installed either manually or via the plugin, you can start adding amazing icons to your websites.

What are the Default Icons that can be used with the Store Locator?

Users of Agile Store Locator can also add certain default icons to the store locator map. Moreover, the list of default icons that can be used with the store locator is shown below.

icon-print	icon-mobile-alt	icon-mobile	icon-mobile-1
icon-mobile-2	icon-direction-outline	icon-tag	icon-tag-1
icon-tag-2	icon-star	icon-star-half	icon-star-empty
icon-cancel	icon-cancel-1	icon-link	icon-calendar
icon-calendar-1	icon-clock	icon-hourglass	icon-search
icon-search-1	icon-search-2	icon-zoom-in	icon-mail
icon-mail-1	icon-zoom-out	icon-bookmark	icon-plus
icon-plus-1	icon-minus	icon-minus-circled	icon-back
icon-undo	icon-location	icon-location-1	icon-address
icon-compass	icon-left-open-big	icon-left-open	icon-left-big
icon-info	icon-at	icon-linkedin	icon-down-open-1
icon-up-open	icon-up-open-2	icon-spin1	icon-spin3
icon-down-open	icon-up-open-1	icon-left-open-1	icon-link-ext
icon-bookmark-empty	icon-facebook	icon-mail-alt	icon-star-half-alt
icon-direction	icon-help	icon-right-open	icon-right-open-big
icon-angle-circled-right	icon-share	icon-twitter	icon-address-book
icon-address-card-o	icon-facebook-1	icon-instagram