How to Include Icons on Store Locator WordPress

  • Updated on: April 20, 2022
how-to-include-icons-in-store-locator
how-to-include-icons-in-store-locator

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
Font Awesome CDN
Font Awesome CDN

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" />
  1. Go to “Appearances” on WordPress, and select “Theme File Editor”
  2. Select the “header.php” file in the theme editor 
  3. Paste the above code before the </head> closing tag
Insert CDN Code
Insert CDN Code
  1. 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>
Select an Icon Code
Select an Icon Code
  1. Insert the code in the “Template Editor”
  2. Click on “Save Template”
Custom Code with Icon Code
Custom Code with Icon Code

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-printicon-mobile-alticon-mobileicon-mobile-1
icon-mobile-2icon-direction-outlineicon-tagicon-tag-1
icon-tag-2icon-staricon-star-halficon-star-empty
icon-cancelicon-cancel-1icon-linkicon-calendar
icon-calendar-1icon-clockicon-hourglassicon-search
icon-search-1icon-search-2icon-zoom-inicon-mail
icon-mail-1icon-zoom-outicon-bookmarkicon-plus
icon-plus-1icon-minusicon-minus-circledicon-back
icon-undoicon-locationicon-location-1icon-address
icon-compassicon-left-open-bigicon-left-openicon-left-big
icon-infoicon-aticon-linkedinicon-down-open-1
icon-up-openicon-up-open-2icon-spin1icon-spin3
icon-down-openicon-up-open-1icon-left-open-1icon-link-ext
icon-bookmark-emptyicon-facebookicon-mail-alticon-star-half-alt
icon-directionicon-helpicon-right-openicon-right-open-big
icon-angle-circled-righticon-shareicon-twittericon-address-book
icon-address-card-oicon-facebook-1icon-instagram

Leave A Comment