Icons in AirPro demo have been added using a custom WPBakery Page Builder addon: “Theme Icon”.

By default, Theme Icon offers a small set of default icons that ship with the theme.

It is however possible to tweak Theme Icon, so it starts using a custom set of icons instead of default ones.


Please note: after this change, Theme Icon will offer only icons from the custom icon set.

Default icons will not be offered anymore.


Steps:

  1. Go to IcoMoon App (https://icomoon.io/app/#/select);
  2. Import your custom font. It’ll probably be necessary to provide .svg version of the font.
  3. Click Generate Font;
  4. Open Preferences, and enter a unique font name and icon classes prefix.
  5. Click Download.
  6. On your disc, extract the downloaded package. You’ll only need two things: file “style.css” and folder “fonts”.
  7. Upload and activate AirPro child theme. The child theme is shipped with your downloaded ThemeForest bundle.
  8. Create a new folder under the child theme folder, e.g. “wp-content/themes/airpro-child/assets/css”;
  9. Upload the downloaded files (“style.css” and “fonts”) into this folder.
  10. Rename “style.css” to “my-theme-icons.css”.
  11. Open functions.php for the child theme, and add the following lines of code (make sure to use icon classes prefix selected in IcoMoon)
    add_filter( 'vc_iconpicker-type-theme-icons', 'airpro_child_get_theme_icon_list' );

add_action( 'wp_enqueue_scripts', 'airpro_child_scripts_custom_icons', 102 );
function airpro_child_scripts_custom_icons() {
    wp_enqueue_style( 'airpro-child-custom-theme-icons', get_stylesheet_directory_uri() . '/assets/css/my-custom-icons.css', false );
}

add_action( 'admin_enqueue_scripts', 'airpro_child_scripts_custom_icons' );

function airpro_child_get_theme_icon_list() {

    $path_to_theme_icons_css_file = get_stylesheet_directory() . '/assets/css/my-custom-icons.css';
    if ( ! file_exists( $path_to_theme_icons_css_file ) ) {
        return array();
    }

    $text = file_get_contents( $path_to_theme_icons_css_file );

    preg_match_all( "/^\.airpro-custom-icon(.*)$/m", $text, $m );
    $icon_names = array();
    foreach ( $m[0] as $line_with_icon_name ) {
        $current_line_is_legacy_duplicate = strpos( $line_with_icon_name, 'before,' ) !== false;
        if ( $current_line_is_legacy_duplicate ) {
            continue;
        }
        $line = str_replace( ':before {', '', $line_with_icon_name );
        $icon_names[] = str_replace( '.airpro-custom-icon-', 'airpro-custom-icon-', $line );
    }
    $theme_icons = array();
    foreach ( $icon_names as $icon_name ) {
        $theme_icons[] = array( (string)$icon_name => (string)$icon_name );
    }

    return $theme_icons;
}




  12. After this, “Theme Icon” should start offering the custom icon sets.

The following screenshots illustrate the process:

IcoMoon 1

IcoMoon 2

IcoMoon Downloaded Files

New functions.php

New ThemeIcon