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.
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:
/*----------------------------------------
// 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:
Download Fontello or Flaticon Icons included in Enfold demos
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 ‘entypo–fontello‘. 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;
}
Note when using SVG icons
The wp-media-library SVGs are identified by attachment ID, when using these, you should use the attachment ID as following:
function avia_replace_default_icons($icons){
$icons['svg__standard'] = array( 'font' =>'svg_wp-media-library', 'icon' => '40720');
return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);For other SVG iconsets you must use the name.
For example, to update the Search icon, we can use the following code:
add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);
function avia_replace_standard_icon($icons)
{
$icons['svg__search'] = array( 'font' => 'entypo-fontello', 'icon' => 'ue803' );
return $icons;
}Important: Iconfont: Entypo Fontello (entypo-fontello) must be activated – otherwise we have to switch to svg by default
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: