USING GENERICON IN WORDPRESS MENU

Featured Theme Forums CSS and PHP USING GENERICON IN WORDPRESS MENU

This topic contains 4 replies, has 2 voices, and was last updated by  abhisekpadhi 1 year, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #13408

    abhisekpadhi
    Participant

    Dear Zeaks,
    URL: http://abhisekpadhi.tk/ =>MY BLOG
    I wanted to use genricons in the main-menu, So i uploaded genericon fonts to my theme directory and imported them in my style.css , Then used this code :

    .home-icon:before {
    display: inline-block;

    width: 24px;

    height: 16px;

    -webkit-font-smoothing: antialiased;

    font-size: 23px;

    line-height: 1;

    font-family: ‘Genericons';

    text-decoration: inherit;

    font-weight: normal;

    font-style: normal;

    vertical-align: top;

    }
    .home-icon:before {
    content: ‘f409′;
    }

    And used css class “home-icon” in wordpress menu css class option,
    [IMG]http://media.abhisekpadhi.tk//img-1.png[/IMG]
    I could not figure out what was causing the genericon’s bad display.
    Hope you could help me.
    Thanks in advance.
    Bye.

    .home-icon:before {<br />
    display: inline-block;<br />
    <br />
    width: 24px;<br />
    <br />
    height: 16px;<br />
    <br />
    -webkit-font-smoothing: antialiased;<br />
    <br />
    font-size: 23px;<br />
    <br />
    line-height: 1;<br />
    <br />
    font-family: 'Genericons';<br />
    <br />
    text-decoration: inherit;<br />
    <br />
    font-weight: normal;<br />
    <br />
    font-style: normal;<br />
    <br />
    vertical-align: top;<br />
    <br />
    }<br />
    .home-icon:before {<br />
    content: 'f409';<br />
    }

    And used css class “home-icon” in wordpress menu css class option,
    img-1.png
    I could not figure out what was causing the genericon’s bad display.
    Hope you could help me.
    Thanks in advance.
    Bye.

    #15213

    Zeaks
    Participant

    If you’re seeing a broken image, then then it’s usually the path to the genericon icon is not correct. In my tutorial on using Genericons you also have to add the font path like this

    Code:
    /* FONTS */
    @font-face {
    font-family: Genericons;
    src: url(fonts/genericons-regular-webfont.eot);
    src: url(fonts/genericons-regular-webfont.eot?#iefix) format(“embedded-opentype”),
    url(fonts/genericons-regular-webfont.woff) format(“woff”),
    url(fonts/genericons-regular-webfont.ttf) format(“truetype”),
    url(fonts/genericons-regular-webfont.svg#genericonsregular) format(“svg”);
    font-weight: normal;
    font-style: normal;
    }
    #15214

    abhisekpadhi
    Participant
    Zeaks, post: 2530, member: 1 wrote:
    If you’re seeing a broken image, then then it’s usually the path to the genericon icon is not correct. In my tutorial on using Genericons you also have to add the font path like this

    Code:
    /* FONTS */
    @font-face {
    font-family: Genericons;
    src: url(fonts/genericons-regular-webfont.eot);
    src: url(fonts/genericons-regular-webfont.eot?#iefix) format(“embedded-opentype”),
    url(fonts/genericons-regular-webfont.woff) format(“woff”),
    url(fonts/genericons-regular-webfont.ttf) format(“truetype”),
    url(fonts/genericons-regular-webfont.svg#genericonsregular) format(“svg”);
    font-weight: normal;
    font-style: normal;
    }

    I had done that.
    but still no results…..

    #15215

    Zeaks
    Participant

    Try using an icon you’re already using without problems, if that works, it will help narrow down what the issue is. Usually it’s just a path issue. Also make sure you clear any cacheing plugins after making changes.

    #15216

    abhisekpadhi
    Participant

    Ok ! I just figured it out. Though the theme is responsive on and so is the nav-menu’s, I have to modulate some css to achieve what i’m looking for.
    After all Thank you for support zeaks.
    This thread can be closed.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.