How to add custom icons using child theme?

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

1. Create and activate child theme on your site. 

You can find detailed instructions on how to create and activate child theme in the theme documentation.

2. Create icon folder (e.g. MyIcon) with required items:

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.

3. Create PHP file for your icons:

The PHP file should be named as the icons (for example, MyIcon). As an example of how the PHP file should look, you can use one of the existing fonts 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. 

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(     'icon-01 (myicon set)' => $set . '_f100',     'icon-02 (myicon set)' => $set . '_f101',     'icon-03 (myicon set)' => $set . '_f102',     'icon-04 (myicon set)' => $set . '_f103',     'icon-05 (myicon set)' => $set . '_f104'
);

The glyph codes are defined in style.css file (located in downloaded file from e.g. IcoMoon). Here is the example:

.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";
}

4. Upload icon folder:

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

5. Copy and edit theme files - Step 01:

Copy admin-style.php file, from your main theme's root folder to your child theme's root folder \wp-content\themes\your-child-theme-name, 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_stylesheet_directory_uri() . '/fonts/MyIcon/MyIcon.woff' . '") format("woff") , url("' . get_stylesheet_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 MyIcon).

5. Copy and edit theme files - Step 02:

Copy icons.php file, from your main theme's root folder to your child theme's root folder \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_stylesheet_directory_uri() . '/fonts/MyIcon/MyIcon.woff' . '") format("woff") , url("' . get_stylesheet_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 MyIcon).