Genericon CSS Code Not Displaying Buttons

Community Forums Forums Design Tips and Tricks Genericon CSS Code Not Displaying Buttons

This topic is: resolved

This topic contains 6 replies, has 3 voices, and was last updated by  AHereld 1 year ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24684

    braddalton
    Participant
    Post count: 10217

    This is the button code included in the Genericons package and the Genericon’d plugin.
    [css]
    .my-button {
    font-family: Helvetica, sans-serif;
    background: #e05d22; /* Old browsers */
    background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient( top, #e05d22 0%, #d94412 100%); /* FF3.6+ */
    background: -ms-linear-gradient( top, #e05d22 0%, #d94412 100%); /* IE10+ */
    background: -o-linear-gradient( top, #e05d22 0%, #d94412 100%); /* Opera 11.10+ */
    background: linear-gradient( to bottom, #e05d22 0%, #d94412 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e05d22′, endColorstr=’#d94412′, GradientType=0); /* IE6-9 */
    display: inline-block;
    padding: 10px 16px 6px 16px;
    color: #fff;
    text-decoration: none;
    border: none;
    border-bottom: 3px solid #b93207;
    border-radius: 2px;
    }

    .my-button:hover,
    .my-button:focus {
    background: #ed6a31; /* Old browsers */
    background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* FF3.6+ */
    background: -ms-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* IE10+ */
    background: -o-linear-gradient( top, #ed6a31 0%, #e55627 100%); /* Opera 11.10+ */
    background: linear-gradient( to bottom, #ed6a31 0%, #e55627 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ed6a31′, endColorstr=’#e55627′, GradientType=0); /* IE6-9 */
    outline: none;
    }

    .my-button:active {
    background: #d94412; /* Old browsers */
    background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient( top, #d94412 0%, #e05d22 100%); /* FF3.6+ */
    background: -ms-linear-gradient( top, #d94412 0%, #e05d22 100%); /* IE10+ */
    background: -o-linear-gradient( top, #d94412 0%, #e05d22 100%); /* Opera 11.10+ */
    background: linear-gradient( to bottom, #d94412 0%, #e05d22 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d94412′, endColorstr=’#e05d22′, GradientType=0); /* IE6-9 */
    border: none;
    border-top: 3px solid #b93207;
    padding: 6px 16px 10px 16px;
    }
    [/css]
    Can’t get this code working in Genesis. Works in Twenty Twelve.
    [html]
    <a class="my-button" href="#"><i class="genericon genericon-show"></i> View</a>
    <a class="my-button" href="#"><i class="genericon genericon-audio"></i> Listen</a>
    [/html]


    #25900

    csbeck
    Participant
    Post count: 135

    Sorry, never used Gerenicons before.

    I had some messy code in here, please see below.

    Or did you get it to work?

    #25901

    csbeck
    Participant
    Post count: 135

    OK I made a mess above.

    So should your code be this instead?

    <a class=”my-button” href=”#”><i class=”genericon genericon-show”> View</i></a>
    <a class=”my-button” href=”#”><i class=”genericon genericon-audio”> Listen</i></a>

    Or did you get it to work?

    #26094

    braddalton
    Participant
    Post count: 10217

    It actually works with some themes but not with others so its a problem with the CSS.

    Esmi from WordPress.org might know the answer.


    #65166

    AHereld
    Participant
    Post count: 20

    Bump.

    I’m running Genesis 2.0 with the Executive Pro child theme. I’d like to implement Genericons on my site as well, but the code doesn’t seem to work. Are they already implemented in this theme?

    blockquote::before {
    content: "\201C";
    display: block;
    font-size: 30px;
    font-size: 3rem;
    height: 0;
    left: -20px;
    position: relative;
    top: -10px;
    }

    content: “\201C”;
    This seems to call out CSS for Genericon, as that’s how it’s noted on the site…however, there genericon-quote is listed as \f106. I’m confused?

    • This reply was modified 1 year ago by  AHereld.
    • This reply was modified 1 year ago by  AHereld.
    #65167

    braddalton
    Participant
    Post count: 10217

    Easier to install a plugin for this.

    There’s a couple to choose from which are really good.


    #65170

    AHereld
    Participant
    Post count: 20

    Thanks!

    Downloaded Genericon’d plugin and edited my CSS. Works flawlessly!

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

The topic ‘Genericon CSS Code Not Displaying Buttons’ is closed to new replies.