Advanced: How to use custom icons in shortcodes?

StartApp contains two large icon packs: Font Awesome and Material Icons with icons for every taste. But what if you want to use your own icons? With StartApp you can do this!

In general terms process looks as follows:

  1. Enqueue the .css file with font icons
  2. Add an icon class to "Custom Icon" field

Pretty easy, huh?

How to enqueue a .css file with custom icons?

Here you have two options:

(1) In case if your icons pack hosted on some external server (like CDN) you can add a link to .css file in Theme Options. Go to your Dashboard > StartApp > Theme Options > Advanced and find Custom Font Icons option. Here you add a link to file and it will be enqueued on the front-end.

NOTE: each new line is treated as a new file to be enqueued.

(2) Enqueue the icon pack in the child theme. This is the best (and the only) option if you don't use CDN or have you own handcrafted icon pack. Let's assume that you place you custom .css file in /startapp-child/assets/css/my-custom-icons.css. In child theme you already have appropriate hook. You can use it.

function startapp_child_scripts() {
   wp_enqueue_style( 'startapp-child', get_stylesheet_directory_uri() . '/style.css', array(), null );
   wp_enqueue_style( 'my-custom-icons', get_stylesheet_directory_uri() . '/assets/css/my-custom-icons.css', array(), null );
add_action( 'wp_enqueue_scripts', 'startapp_child_scripts', 12 );

NOTE: font icons usually required a font files. They are should be placed somewhere in child theme, too.

Ok, let's add a Weather Icons pack to a Button shortcode. Weather Icons are hosted on public CDN, so I can simply add a link to Theme Options.

In Button settings choose Custom Icon Library and add an icon class to Icon field.