phpcsswordpressfontello

fontello not working on wordpress underscore theme


I'm having a problem with Fontello - everythink is working on localhost, but when i've uploaded theme (created on the basis of underscore) on server it's not working (actually it works on main page - set as starting in wordpress - bot not on others).

You can check it on my testing domain webblaster.pl.

Main page is ok- on the left bottom there is fixed "socialmedia" bar - not styled yet - that's why it looks so ugly :)

But on ->fotografia-home -> kontakt on the bottom you can see some not properly loaded fonts.

In the head section I'm attaching a css file using:

<link href="<?php bloginfo('stylesheet_directory'); ?>/fonts/fontello/css/fontello.css" rel="stylesheet" type="text/css">

I have no idea what's wrong - tried to change dir but that didn't work.

I will appreciate any help :)


Solution

  • it seems to be the case that some of your css rules overrides each other.

    In /wp-content/themes/paulinakozan/fonts/fontello/css/fontello.css there is a rule:

    [class^="icon-"]::before, [class*=" icon-"]::before {
        display: inline-block;
        font-family: "fontello"; // <-- IMPORTANT LINE!
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1em;
        margin-left: 0.2em;
        margin-right: 0.2em;
        text-align: center;
        text-decoration: inherit;
        text-transform: none;
        width: 1em;
    }
    

    But another css is loaded by your site: /wp-content/plugins/modula-best-grid-gallery/scripts/modula.css?ver=4.4.2 and there is another rule:

    [class^="icon-"]::before, [class*=" icon-"]::before {
        font-family: "modula-icons" !important; // <-- ANOTHER IMPORTANT LINE!
        font-style: normal !important;
        font-variant: normal !important;
        font-weight: normal !important;
        line-height: 1;
        text-transform: none !important;
    }
    

    The second font-family definition modula-icons is defined as !important, so it wins against fontello! This is the reason why your icons are not loaded correctly. The icons are simply not present in modula-icons.

    If I open your site in chrome and disable the modula-icons rule in the developer toolbar, the social icons are shown correctly.

    enter image description here