To add Custom Icons using the method given here, you should have the Oshine Child theme installed and activated.
- Download the Custom icon files in all the required formats. Create a Folder named ‘custom-icons’ in the Child Theme and place the icon font files in this folder.
- Generate the icon font CSS file and name it ‘icons.css’. Place this file in the root folder inside the Child theme.
- Also, note that when you generate the WebKit, the content code also gets generated for icons. You need to enter the generated content code in this CSS file. That means
CONTENT: "ENTER THE CODE HERE";
Ex –
@font-face {
font-family: 'Font Family';
src: url('custom-icons/font-name.eot');
src: url('custom-icons/font-name.eot?#iefix') format('embedded-opentype'),
url('custom-icons/font-name.woff') format('woff'),
url('custom-icons/font-name.ttf') format('truetype'),
url('custom-icons/font-name.svg#webfont') format('svg');
}
[class^="icon-de"]:before,
[class*=" icon-de"]:before {
font-family: 'Font Family' !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-development:before {
content: "\de"; /*your icon code*/
}
4. Add the following snippet in the functions.php inside child theme,
add_action( 'tatsu_register_icons', 'tatsu_register_custom_icons' );
if( !function_exists( 'tatsu_register_custom_icons' ) ) {
function tatsu_register_custom_icons( ) {
$custom_icon_array = array (
'icon-development', /* Enter your icon class name */
);
$current_stylesheet_uri = get_stylesheet_directory_uri();
tatsu_register_icon_kit( 'custom_icon', __( 'Custom Icons', 'tatsu' ) , $custom_icon_array , $current_stylesheet_uri.'/icons.css' );
}
}
Note that You can replace the ‘Custom Icons’ name with the name of your choice, this will be added as a new Icon Kit in the icon picker inside Tatsu.