Okay
  Public Ticket #1197084
Customizing Icons
Closed

Comments

  •  1
    Michael started the conversation

    How can i upload my own icons into the gadget slideshow? I can only seem to use the google icons :/

  •  124
    8 Guild replied

    Hi,

    Here is a detailed guide how to upload your own icons and use them within Gadget Slideshow. Note, this applicable only for Gadget Slideshow. Also note, this will require some coding. Let's go!

    Step 1. Install and activate a child theme

    I recommend you to add all modifications in the child theme. You can find a child theme in the "Full Package" (inside the main.zip archive - see All files & documentation option on TF).

    Step 2. Prepare the fonts and .css files

    Gadget Slideshow support only the font icons. As example I will use the Weather Icons pack. You need the font files and weather-icons.css. Add all files to child theme.

    /appica-ios-child/font/
    /appica-ios-child/css/weather-icons.css

    Here I create two folders font and css.

    Step 3. Enqueue icons on frontend and backend

    Add this and following code to functions.php file within your child theme.

    /**
     * Enqueue parent and child styles
     */
    function appica_child_enqueue_styles() {
        wp_enqueue_style( 'appica-child', get_stylesheet_directory_uri() . '/style.css', array() );
        wp_enqueue_style( 'weather-icons', get_stylesheet_directory_uri() . '/css/weather-icons.css', array() );
    }
    add_action( 'wp_enqueue_scripts', 'appica_child_enqueue_styles', 15 );
    
    /**
     * Enqueue Icons on admin screens
     */
    function appica_child_admin_styles() {
        wp_enqueue_style( 'weather-icons', get_stylesheet_directory_uri() . '/css/weather-icons.css', array() );
    }
    add_action( 'admin_enqueue_scripts', 'appica_child_admin_styles', 15 );

    Step 4. Get icon names

    You have to create an array with icon classes (note, without leading dots). Weather icons has an .xml file with all available classes. Please note, you have use names with all required prefixes as if adding a class on the frontend to display the icon. For example,

    wi wi-day-sunny
    fa fa-address-book
    ...
    

    After parsing all icons I wrapped this array into the function for more convenience. Here what I get:

    /**
     * A list of Weather Icons
     * 
     * @return array
     */
    function appica_child_weather_icons() {
        return array(
            'wi wi-day-sunny',
            'wi wi-day-cloudy',
            'wi wi-day-cloudy-gusts',
            'wi wi-day-cloudy-windy',
            ...
        );
    }

    Step 5. Add filter to hook up new icons

    add_filter( 'equip_get_icons_weather', 'appica_child_weather_icons' );

    Please note the dynamic part of the filter weather. This will be used as a slug for new icons.

    Step 6. Modify the Gadget Slideshow settings

    /**
     * Modify the Gadget Slideshow settings
     *
     * @param $settings
     *
     * @return mixed
     */
    function appica_child_gs_settings( $settings ) {
        foreach ( $settings as &$setting ) {
            if ( 'icon' !== $setting['key'] ) {
                continue;
            }
            $setting['icons'] = 'weather'; // use the slug from the equip_get_icons_{pack} filter
        }
        return $settings;
    }
    add_filter( 'equip/storage/_appica_slideshow_settings/contents', 'appica_child_gs_settings' );

    Please note, in line $settings['icons'] as a value I use the dynamic part of filter from step 5.

    That's all, as you can see now you can use another icons.

    Also I attached a child theme with all modifications. You can use it as a starting point.

    Regards,

    8Guild Team

    Attached files:  appica-ios-child.zip