Icon

Overview

It is much easier and faster for users to grasp information visually, than to read and process the information. Icons are lightweight and make it easy to effectively communicate visually with the users. Icon element allows you to display a single icon, either from the default icon font that comes with the theme or an icon based on a custom icon pack from flaticon or fontello that you can upload from Enfold > Import/Export tab.

Standalone Icon

Icon Settings

Icon element settings allow you to select:

  • Font Icon
  • Icon Style
  • Icon Caption
  • Title Link?
  • Icon Size
  • Icon Position
  • Optional Tooltip

Shortcode

Icon shortcode can be placed anywhere on the site where you can add text example: In the phone info section of the header, a phone icon shortcode can be added before the phone number. The Unicode for every icon is different. In general, the shortcode for the icon is similar as shown below:

 [av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='24px' position='left' color='' custom_class='' admin_preview_bg='' av_uid='av-6f14vz'][/av_font_icon] 

Customization

Default Icon

Icon color can be set from the icon element pop-up options. To set a custom background color to the default icon use the following CSS code:

/*----------------------------------------
// CSS -  Icon default
//--------------------------------------*/

.av_font_icon .av-icon-char {
	background: #ff0000;	
	width: 75px;
	height: 75px;
	border-radius: 75px;
}
.av_font_icon .av-icon-char:before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    color:#ffdd00;
}

Icon Caption

For a standalone icon with border and caption, color can be set from the icon element pop-up options. To remove the border around the icon, or set a custom color to the icon element or caption use the CSS code provided below:

Call Today!
886 551 3345
/*----------------------------------------
// CSS -  Icon Standard
//--------------------------------------*/

.av_font_icon .av_icon_caption {
	font-family: 'Anton', sans-serif;
	font-weight:200;
	color: #ed1c24;
}
.av_font_icon .av-icon-char {
	background: #ff0000;	
	border:none!important;
}
.av_font_icon .av-icon-char:before {	
      color:#ffdd00;
}

Adding your own Fontello or Flaticon Icons

Custom icon packs from flaticon or fontello can be added to Enfold to extend the icon library.

  • Download the icon pack from one of the supported sites.
  • Upload the icons via Enfold > Import/Export > Iconfont Manager
  • Finally, save the changes. The new icons will be available in the advanced layout builder.

Watch the video on how to build, upload and use a custom font icon. It is actually pretty straightforward:

How to find the icon unicode?

Icon Unicode can be used to add the icon as a pseudo element to the menu or other web elements using custom CSS. To find the icon Unicode open the icon library in the advanced layout builder by clicking on the icon element and hover over the icon to view the “Unicode” or “Charcode”.

To use the icons as a pseudo element do not forget to add the font family name to your custom CSS. The font family is usually same as the font name displayed on the top left of the icon library (May vary for different icon sets). For flaticons, font-family is flaticon and for fontello, font-family is entypofontello. Lastly, the Unicode or Charcode is generally used without the prefix U.

Example:

 
/*----------------------------------------
// CSS -  Pseudo Element Icon
//--------------------------------------*/

#avia-menu  > li:nth-child(1) > a .avia-menu-text:before {
	content:"\e803";
	font-family: 'entypo-fontello';	
	position: absolute;
	left: 0;
}

Change icon used for standard theme elements

The theme has a set of icons defined for theme elements in the main functions.php file in your theme files. They are the icon codes from the entypo-fontello font file that is included in the theme to show all of the various icons used throughout the theme. They array of named instances and their icon codes start just after:

 $avia_config['font_icons'] = apply_filters('avf_default_icons', array(

If you are modifying the main theme you can just change the values for the icon. If you are using a child theme however you can change them through a function.

For example:

add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);

function avia_replace_standard_icon($icons)
{
$icons['standard']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue915');
return $icons;
}

Troubleshoot

Icons are showing as rectangular boxes

Enable CORS (Cross-Origin Resource Sharing): 

If your icons are showing like rectangular boxes.

It may be because of a CORS-related issue, here’s how to fix it:

Apache

Look for the .htaccess file at the root of your WordPress installation and add the following to it:

 <FilesMatch ".(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch> 

IIS7
Look for the web.config file at the root of your WordPress installation and merge it with the following:

 <?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" ></add>
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration> 

Resource

Contributed video:

Icon Element Tutorial