2 Ways to Load Ionicons in WordPress (Locally and with CDN)

yonkov

Git repo: https://github.com/yonkov/ionicons

You have probably heard about Ionic, a popular framework for mobile app development. The guys behind Ionic decided to release their own font, called Ionicons. By far, It is one of the most beautiful, open-source webfonts out there. It consists of more than 1300 unique icons that look great on all devices. The font features stunning typography and it is unbeatable in terms of performance. Each icon is loaded as a component. The component then dynamically loads an SVG file. In this way, the app is only requesting the icons that you need, nothing more.

Are you tired of using Font Awesome for each project? Wouldn’t it be awesome to give Ionicons a try in your next WordPress project? Well, it is actually pretty easy to do so. Let me show you how!

Load Ionicons as CDN

The easiest way to load Ionicons is wih a CDN. This is the recommended method on their official website. You only need to include a single script that will load everything you need. Copy the following snippet to your child theme’s functions.php file:

function my_theme_load_ionicons_font() {
	// Load Ionicons font from CDN
	wp_enqueue_script( 'my-theme-ionicons', 'https://unpkg.com/[email protected]/dist/ionicons.js', array(), '5.2.3', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_load_ionicons_font' );

Now, you can add an icon wherever you wish it to appear. For example, you can add a Facebook social icon to the theme’s menu. To do that, in your WordPress dashboard, navigate to appearance => menu. Select the menu you want to edit and click on add menu items => custom links and in the Link Text tab, add the Facebook icon component:


<ion-icon name="logo-facebook"></ion-icon>

For more information on the Ionicons components, please refer to the Ionicons documentation. Basically, you just have to copy the web component html code and the script will take care of the rest.

Load Ionicons Locally

In some cases, you might wish to load the font locally, instead of using a cdn. CDN-s are great but there are some cases where we cannot use them. Perhaps you want to develop locally and you have little or no access to internet, or you are a theme developer and you are required to bundle all 3-rd party resources within the theme. Whatever the reason might be, this may get far more complicated than it seems at first glance, since there is no information on the Ionicon’s official website about how to do it. It took me quite some time to figure out how to bundle the Ionicons font locally, so I hope this post might help someone who is stuck like me.

You can download the font via npm module, which requires you to have node.js on your PC. If you do not have node, you can also download the source code of the font from this GitHub repo.

Skip this paragraph, if you downloaded the icons from the repo. After you have installed node, open Command Prompt (or terminal, if you use Linux) and run: 

npm i ionicons

This command will download the font and create a node_modules folder in the place where you have opened the command line. Open the folder, navigate to ionicons/dist and copy the contents of the dist folder. Then, go to your theme and paste the files inside the theme, under assets/ionicons folder.

After you have placed the icons to the assets folder, you need to add this code snippet to your child theme’s functions.php file:


function my_theme_load_ionicons_font() {
// Load Ionicons font locally
wp_enqueue_script( 'my-theme-ionicons-module', get_template_directory_uri() . '/assets/ionicons/ionicons.esm.js', array(), '5.2.3', true );
wp_enqueue_script( 'my-theme-ionicons', get_template_directory_uri() . '/assets/ionicons/ionicons.js', array(), '5.2.3', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_load_ionicons_font' );
// Append type="module" to Ionicons module script
function my_theme_add_type_module_attribute( $tag, $handle ) {
	if ( $handle !== 'my-theme-ionicons-module' ) {
		return $tag;
	}
	// add type='module' script attribute
	$new_tag = str_replace( ' src', " type='module' src", $tag );
	return $new_tag;
}
add_filter( 'script_loader_tag', 'my_theme_add_type_module_attribute', 10, 2 );

The trick here is to load the first script with module attribute. For this, we need to use the script_loader_tag WordPress hook. That’s all, you should now be able to use the icons locally!

Leave a Reply