There are two methods available for utilizing custom image icons within the plugin. The first is the standard WordPress media uploader, which allows you to upload an image file to use as the image icon. The second method is a bit more involved but would allow you to create a directory of images in your theme root to be referenced in the ‘Announcement Icons’ browser.
Method 1: Uploading Custom Icons
This method is fairly straightforward and is the exact same as uploading media to your WordPress site.
You’ll first want to click on the ‘Add or Upload Icon’ button in the ‘Image Icon’ section.
Next, click on the ‘Upload Files’ tab and click the ‘Select Files’ button. Then, select the image icon you want to upload from your local machine to complete the upload.
Finally, when the icon has uploaded you can click on the ‘Use this File’ button in the bottom right of the media uploader.
Method 2: Custom Icons in the Icon Browser
The next method is a bit more streamlined, and a great approach for those handing off projects to a client who want to implement custom icons – and who may not want to use any of the bundled icons.
First, you’ll want to create a directory, timeline-express, in the root of your theme. If you’ve implemented a custom template or have made any customizations to the template files, you may already have this directory created.
Inside of the timeline-express directory, you’ll want to create another directory ‘image-icons’.
For example, if you had a TwentySeventeen child theme installed, your directory structure would be wp-content/themes/twentyseventeen/timeline-express/image-icons.
Example
You can add all of your icons into the image-icons directory and Timeline Express – Image Icons Add-On will pick up the icons and display them inside of the Announcement Icon browser.
Custom Icon Naming Conventions & Categories
The Image Icons Add-On will pick up any custom icons that are added to the directory mentioned above. The add-on also does it’s best to generate a category from the filename of the icon, which is then displayed in the drop-down used for filtering the icons.
More specifically, categories are generated from the prefix of your icon filename. For example, if you upload an icon Custom-icon123.png, the plugin will generate a category ‘Custom’ and display it in the drop-down. Prefixing your icon with a `Custom-` prefix will place the icon into the ‘Custom’ category.
If you upload a large number of icons and want to split them up into categories for easy sorting, you can do so by prefixing them accordingly.
Special_Icons-icon123.pngBrand_Name-icon.pngMagic-icon.png
If you added 3 icons to the directory with the names above, you would get 3 separate categories: Speical Icons, Brand Name, and Magic.
Disable All Bundled Icons in Icon Browser
If you’re uploading a large number of icons, there’s a good chance you don’t necessarily want to use the default icons in your timeline. If this is the case, you can disable all of the icons from displaying in the ‘Announcement Icon’ browser window so only your custom icons and custom icon categories are available to choose from.
Take a look at our article on How To: Disable All Bundled Icons in the Icon Browser.