integrating custom icons – whats with the backend style?

  • Resolved Insomnia88

    (@insomnia88)


    6 years, 3 months ago

    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.