How do I add Custom Icons?

To add Custom Icons using the method given here, you should have the Oshine Child theme installed and activated.

  1. 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.
  2. Generate the icon font CSS file and name it ‘icons.css’. Place this file in the root folder inside the Child theme.
  3. 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.

Related Articles

Leave A Comment?

You must be logged in to post a comment.