Buy Theme

How to use custom icons in shortcodes?

Silicon contains our brand Silicon Icons and Socicons. Optionally, some shortcodes supports two large packs: Font Awesome and Material Icons with icons for every taste. But what if you want to use your own icons? With Silicon 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 or your own public server) you can add a link to .css file in Theme Options. Go to your Dashboard > Silicon > Theme Options > Advanced and find Custom Font Icons option. Here you add a link to file and they 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 /silicon-child/css/my-custom-icons.css. In child theme you already have appropriate hook. You can use it.

function silicon_child_scripts() {
   wp_enqueue_style( 'silicon-child', get_stylesheet_directory_uri() . '/style.css', array(), null );
   wp_enqueue_style( 'my-custom-icons', get_stylesheet_directory_uri() . '/css/my-custom-icons.css', array(), null );
add_action( 'wp_enqueue_scripts', 'silicon_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.