Ticksy: Printing “How to add custom Icon Font to Bold Timeline”

Please refer to the instruction below on how to add custom icons to Bold Timeline:

1. Copy the font files to /assets/fonts/

Make sure that your icon files contains .ttf and .woff files, as well as CSS file with icons' names and glyph codes. If it doesn't have these files, you could use IcoMoon to generate the files.

2. Create PHP file for your icons:

Usually you will name PHP file as the icons (for example, MyIcon.php) and saved to /assets/php/ . As an example of how the PHP file should look, you can use one of the existing fonts and copy their files' content, and replace it with your glyph codes. Make sure to rename the function name in the file in line with the name of your icon set (for example function my_custom_icons())

The glyph codes are defined in style.css file (located in downloaded file from e.g. IcoMoon). Here is the example:

.icon-01:before {  content: "\f100";
}
.icon-02:before {  content: "\f101";
}
.icon-03:before {  content: "\f102";
}
.icon-04:before {  content: "\f103";
}
.icon-05:before {  content: "\f104";
}

3. Edit plugin files - bold_timeline_item.php:

In \content_elements\bold_timeline_item\bold_timeline_item.php file, locate the following line of code:

require_once( dirname(__FILE__) . '/../../assets/php/fa_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/s7_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/FontAwesome5Brands.php' );
$icon_arr = array( 'Font Awesome' => bold_timeline_fa_icons(), 'S7' => bold_timeline_s7_icons(), 'FontAwesome5Brands' => bold_timeline_FontAwesome5Brands_icons() );

here, you need to add the reference to your newly created php file and map the function within it. Here is how you need to modify the existing code:

require_once( dirname(__FILE__) . '/../../assets/php/fa_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/s7_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/FontAwesome5Brands.php' );
require_once( dirname(__FILE__) . '/../../assets/php/MyIcon.php' );
$icon_arr = array( 'Font Awesome' => bold_timeline_fa_icons(), 'S7' => bold_timeline_s7_icons(), 'FontAwesome5Brands' => bold_timeline_FontAwesome5Brands_icons(), 'MyCustomIcons' => my_custom_icons() );

note the require once statement and the additional member of the $icon_arr at the last line of code snippet.

4. Edit theme files - Additional CSS:

You also need to add the following statements to your theme css:

@font-face {
    font-family: 'MyCustomIcons';
    src: url(assets/fonts/MyIcon.woff?v=1.1.1) format('woff'),url(assets/fonts/MyIcon.ttf?v=1.1.1) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
[data-ico-fa5b]:before {
    font-family: MyCustomIcons;
    content: attr(data-ico-fa5b);
    }

Remeber, you need to map every glyph in your Icon set as for fa5b glyph in the example above just as you did in MyIcon.php

In the example above fa5b is the hex code of the glyph as defined in the MyIcon.php. The statement

[data-ico-fa5b]:before {
    font-family: MyCustomIcons;
    content: attr(data-ico-fa5b);
    }

needs to be added for every glyph and string fa5b needs to be replaced with the respective hex code

5. Add custom Admin CSS:

Finally you need to add the following statements to your admin theme css (or plugin's style-admin.css file) in order to display the proper icons in the icon selection control:

@font-face {
    font-family: 'MyCustomIcons';
    src: url(assets/fonts/MyIcon.woff?v=1.1.1) format('woff'),url(assets/fonts/MyIcon.ttf?v=1.1.1) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
.bt_bb_icon_preview_fa5b {
    font-family: MyCustomIcons;
}
[data-ico-fa5b]:before {
    font-family: MyCustomIcons;
}

Again, remember that you need to map every glyph in your Icon set as for fa5b glyph in the example above just as you did in MyIcon.php