Okay
  Print

How to add custom icons?

Please refer to the instruction below on how to add custom icons to your theme:

1. Make sure that your icon folder contains .ttf and .woff files, as well as CSS file with icons' names and glyph codes. If it doesn't have these files, you could use IcoMoon to generate the files.

2. Create PHP file that will contain the same structure as php files of other fonts already added to the theme. You can use php file of, for example, Business or Design, and you only need to replace the icon names and glyph codes to match the ones in your CSS file. The newly created php file should be named as the icons (for example, myIcons)

3. Once you have the files, please go to \wp-content\themes\your-theme-name\fonts folder, on your server, and create a new folder, in the fonts folder, and name it as you named your icons (myIcons).
The new fonts folder should contain .ttf and .woff files, and php file.

4. In admin-style.php file, in \wp-content\themes\your-theme-name folder, remove the following line of code, which is located at the end:

', array() );

and replace it with the following code.

@font-face{
    font-family:"MyIcon";
    src:url("' . get_template_directory_uri() . '/fonts/MyIcon/MyIcon.woff") format("woff"),url("' . get_template_directory_uri() . '/fonts/MyIcon/MyIcon.ttf") format("truetype");
}
*[data-ico-myicon]:before{
    font-family: MyIcon;
    content:attr(data-ico-myicon);
}
.bt_bb_icon_preview.bt_bb_icon_preview_myicon{
    font-family: MyIcon;
}', array() );

Replace every occurrence of 'MyIcon' / 'myicon' with the name of your icons (if you didn't name them MyIcons).

5. In icons.php file in \wp-content\themes\your-theme-name folder, remove the following line of code, which is located at the end:

', array() );

and replace it with the following code.

@font-face {
        font-family: "MyIcon";
        src: url("' . get_template_directory_uri() . '/fonts/MyIcon/MyIcon.woff") format("woff"), url("' . get_template_directory_uri() . '/fonts/MyIcon/MyIcon.ttf") format("truetype");
}
*[data-ico-myicon]:before {
        font-family: MyIcon;
        content: attr(data-ico-myicon);
}', array() );

Replace every occurrence of 'MyIcon' / 'myicon' with the name of your icons (if you didn't name them MyIcons).