How do I add Custom Icons?

To add a 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 a folder named ‘icons’ within the root folder             inside the Child theme. Ensure the font sources are pointed to files within the custom-icons folder –

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');
}
i.sp{
  font-family: 'Font Family' !important;
  speak:none;
  font-style:normal;
  font-weight:400;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.sp-sample-icon-class-name1:before{
  content:"\e900"; /* just an example */
}
.sp-sample-icon-class-name2:before{
  content:"\e901"; /* just an example */
}

3. 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 (
'sp sp-sample-icon-class-name1',  /* Enter your icon class name */
'sp sp-sample-icon-class-name2',  /* 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/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.