Okay
  Public Ticket #1563612
Icon Addition Issue
Closed

Comments

  •  1
    SnipySnob started the conversation

    Hi, I'm having an issue adding additional icons to the website. I can get 7 blank entries under the name "ENT Icons," but they're all blank (even after a browser cache refresh). I've copied the same format as located in your orion_so_filters.php widget folder. 

    Here is the code (added to child functions.php):
    <code>

    function orion_add_ent_icons( $icons ) {       
    return array (         
    'icon-hearing-impaired' => '',     
    'icon-ear' => '',
    'icon-nose' => '',
    'icon-throat' => '',
    'icon-stethescope' => '',
    'icon-allergy' => '',
    'icon-audiology' => '',
    );
    }

    add_filter('siteorigin_widgets_icons_ent', 'orion_add_ent_icons');

    function ent_widgets_icon_families_filter( $families ) {
    $families['icomoon'] = array(        
    'name' => esc_html__( 'ENT Icons', 'dentalia' ),        
    'style_uri' => get_template_directory_uri().'/libs/ent-font/style.css',        
    'icons' => apply_filters('siteorigin_widgets_icons_ent', array() )
    );    
    return $families;
    }

    add_filter( 'siteorigin_widgets_icon_families', 'ent_widgets_icon_families_filter' );

    </code>


    I noticed a similar format to https://icomoon.io/ in your files, so I uploaded the svg's and created the font through them. I've attached the files and a screenshot of where it was installed. I also tried installing in a /libs/ directory within the child theme folders, but that didn't work either.

    What am I doing wrong?

    Attached files:  ent-font.rar
      issue.jpg

  •  173
    OrionThemes replied

    Hi,

    We use Icomoon to create an icoon font too.

    I checked what you sent, and everything seems OK.

    Based on your description there are two possible issues.

    1.st would be that something isn't loading (you should be able to see an error in web inspector console)

    2.nd is that some minor css adjustments are needed. As I recall something like this is needed, because the page builder icon system uses :before element to display icons.

    .sow-icon-dentalicons5[data-sow-icon]:before{
        font-family: 'dental-icons-5' !important;
        content: attr(data-sow-icon);
        speak: none;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;    
    }

    Please try pasting it to your icomoon css file and adjust it to match your font class and font name.

    If this does not solve the issue, you can send me wp-admin and FTP access (in a private reply) and I can check...

    Kind regards,
    Andrej

  •  1
    SnipySnob replied

    Andre,

    I made more CSS modifications, and learned the issue. In the initial CSS provided, the icon css read:

    icon-hearing-impaired:before {
      content: "\e800";
    }

    What was missing was the font family name before it. 

    .icomoon-icon-hearing-impaired:before {
      content: "\e800";
    }

    I guess I'm just not well versed in the latest css (i.e. content: attr(data-sow-icon); ) Thanks for all your help, I appreciate ya.

  •  173
    OrionThemes replied

    Hi,

    I am glad you managed to solve it and thank you for the feedback.

    Kind regards,
    Andrej