Adding Custom Icons [Pro]

If you would like to add additional font icons to ShiftNav, you can register those icons via PHP.

Requirements

1. This works only with font icons (as opposed to SVG or images)
2. The icon markup must be in the format

   <i class="{icon-class}"></i>

3. You must register any CSS/font assets separately

Registering icons

To register your own icons, you can add some code to your child theme’s functions.php. Replace the placeholders with appropriate values for your custom icons.

add_action( 'shiftnav_register_icons' , 'my_shiftnav_custom_icons' , 20 );
function my_shiftnav_custom_icons(){
   if( !function_exists( 'shiftnav_register_icons' ) ) return;
   shiftnav_register_icons( 'icon-set-slug' , array(
      'title' => 'Icon Set Title', //A title for this icon set, e.g. 'Font Awesome'
      'class_prefix' => 'prefix-', //The prefix for classes - e.g. 'fa '
      'iconmap' => array( //A map of icon classes to icon titles
         'icon-class-name-1' => array(
            'title' => 'Icon Title 1',
         ),
         'icon-class-name-2' => array(
            'title' => 'Icon Title 2',
         ),
         //list additional icons to register
      )
   ));
}

Output

The registered icons above would create the output

<i class="prefix-icon-class-name-1"></i>
<i class="prefix-icon-class-name-2"></i>

Example: Fontello

Here’s an example of registering 3 icons from Fontello:

add_action( 'shiftnav_register_icons' , 'fontello_custom_icons' , 20 );
function fontello_custom_icons(){
   if( !function_exists( 'shiftnav_register_icons' ) ) return;
   shiftnav_register_icons( 'fontello' , array(
      'title' => 'Fontello', 
      'class_prefix' => 'icon-',
      'iconmap' => array(
         'paper-plane' => array(
            'title' => 'Paper Plane',
         ),
         'music' => array(
            'title' => 'Music',
         ),
         'mail' => array(
            'title' => 'Mail',
         ),
         //list additional icons to register
      )
   ));
}

The markup output from these icons would be:

<i class="icon-paper-plane"></i>
<i class="icon-music"></i>
<i class="icon-mail"></i>

Important: You would still need to register the appropriate stylesheet and font assets (using wp_enqueue_style), both on the front end and in the admin, for the icons to appear. The code above allows the plugin to produce the markup, but unless the font assets are loaded, nothing will actually appear