• Resolved Insomnia88

    (@insomnia88)


    Hi,
    I want to integrate some custom icons and managed to do that following your docs. I only have one problem: The added icon-font doesn’t show the icons inside the dropdown of the backend (eg in the icon-widget). I have empty slots by default because the stylesheet isn’t loaded.
    I managed to solve the problem by adding a custom *css to the backend including the font styles but isn’t there a more correct/elegant way to solve this? I assumed your function/hook is doing that automatically.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor alexgso

    (@alexgso)

    Hi insomnia88,

    Can you please provide me with a copy of the code you’re using to add the icon? I’ll look over it to see if I can spot what’s going wrong.

    Thread Starter Insomnia88

    (@insomnia88)

    Sure, here you go

    function my_icon_families_filter( $icon_families ) {
        $icon_families['flaticon'] = array(
            'name' => 'Kindergarten Icons',
            'style_uri' => get_theme_file_uri() . '/assets/fonts/flaticon.css',
            'icons' => array(
                'flaticon-abacus' => '',
            ),
        );
        return $icon_families;
    }
    add_filter( 'siteorigin_widgets_icon_families', 'my_icon_families_filter' );
    Plugin Contributor alexgso

    (@alexgso)

    Hi insomnia88,

    That looks good. Can you please provide me with the contents of flaticon.css?

    Thread Starter Insomnia88

    (@insomnia88)

    @font-face {
      font-family: "Flaticon";
      src: url("/wordpress/wp-content/themes/mytheme/assets/fonts/Flaticon.eot");
      src: url("/wordpress/wp-content/themes/mytheme/assets/fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
           url("/wordpress/wp-content/themes/mytheme/assets/fonts/Flaticon.woff") format("woff"),
           url("/wordpress/wp-content/themes/mytheme/assets/fonts/Flaticon.ttf") format("truetype"),
           url("/wordpress/wp-content/themes/mytheme/assets/fonts/Flaticon.svg#Flaticon") format("svg");
      font-weight: normal;
      font-style: normal;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
        font-family: "Flaticon";
        src: url("/wordpress/wp-content/themes/mytheme/assets/fonts/Flaticon.svg#Flaticon") format("svg");
      }
    }
    
    [class^="sow-icon-flaticon"]:before, [class*=" sow-icon-flaticon"]:before,
    [class^="sow-icon-flaticon"]:after, [class*=" sow-icon-flaticon"]:after {   
        font-family: Flaticon;
        font-style: normal;
        line-height: 1em;
    }
    
    [class^="sow-icon-flaticon"]:before, [class*=" sow-icon-flaticon"]:before {   
        content: attr(data-sow-icon);
    }
    Plugin Contributor alexgso

    (@alexgso)

    Hi insomnia88,

    Thanks. That looks right but admittedly, I’m unable to verify the paths.
    Would it be possible for you to post a thread on our forums? This will allow us to try a few other things.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘integrating custom icons – whats with the backend style?’ is closed to new replies.