Okay
  Print

How to add new Font icons?

In order to add new Font icons, you should customize the theme. Please do the following steps:

1. First of all you need to import your font file. You will need to import .eot, .svg, .ttf, and .woff files of your font, and name them the same. For example 'myFont'. Files need to be added to \wp-content\themes\your-theme-name\fonts folder.

2. Please take a look at the top of style.crush.css (or style.css) file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome for example, and declare the font-family as 'myFont' or any name you used for your font (*note that it has to be the same name you used for files).


3. Then you need to search for 'data-ico-fa' in the style.crush.css (or style.css) file and create respective statements for your font. 


For example when you locate:

*[data-ico-fa]:before {
    font-family: FontAwesome;
    content: attr(data-ico-fa);
    }

you need to create:

*[data-ico-mf]:before {
    font-family: myFont;
    content: attr(data-ico-mf);
    }

etc.

*Please note that mf stands for the name of the font (in our example myFont), so if you named your font differently, you need to use acronym that matches your font's name. This refers to all the code that is added for new icons, as well as file names.

4. Then, you need to create new file in theme plugin's folder called bt_mf_icons.php. The file should be added to \wp-content\plugins\your-theme-name folder.


As an example of how the PHP file should look, you can use one of the existing fonts (bt_fa_icons.php) and copy their files' content, and replace it with your glyph codes.

Or, you can use the following example, and just replace the glyph codes (numbers: f100, f101, f102 etc.) with the ones from your icon set. 

function bt_mf_icons(){
 $arr = array(
     '  ' => 'no_icon', 
     'icon-01' => 'mf_' . '_f100',
     'icon-02' => 'mf_' . '_f101',
     'icon-03' => 'mf_' . '_f102',
     'icon-04' => 'mf_' . '_f103',
     'icon-05' => 'mf_' . '_f104',
);

The glyph codes are defined in style.css file of your font. Here is the example:

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(
    'icon-01:before {
  content: "\f100";
}
    'icon-02:before {
  content: "\f101";
}
    'icon-03:before {
  content: "\f102";
}
    'icon-04:before {
  content: "\f103";
}
    'icon-05:before {
  content: "\f104";
}------>


5. Finally, you need to edit php file in your plugin's folder, search for bt_fa_icons() and add respective statements for bt_mf_icons() as well. The file is in \wp-content\plugins\your-theme-name folder (it is the file named as the theme).

*The example is from our Industrial theme but the process is the same for all themes.

For example to change all occurrences of:

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to:

$icon_arr = array_merge( bt_fa_icons(), bt_mf_icons(), bt_s7_icons(), bt_custom_icons() );