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.