• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Genericon CSS Code Not Displaying Buttons

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved

Tagged: CSS Buttons, Genericons, genesis

  • This topic has 6 replies, 3 voices, and was last updated 8 years, 8 months ago by AHereld.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 6, 2013 at 7:21 pm #24684
    Brad Dalton
    Participant

    This is the button code included in the Genericons package and the Genericon'd plugin.

    .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;
                }
    

    Can't get this code working in Genesis. Works in Twenty Twelve.

    <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>
    

    2700 Genesis Tutorials

    March 13, 2013 at 12:24 pm #25900
    csbeck
    Member

    Sorry, never used Gerenicons before.

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

    Or did you get it to work?

    March 13, 2013 at 12:27 pm #25901
    csbeck
    Member

    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?

    March 13, 2013 at 7:57 pm #26094
    Brad Dalton
    Participant

    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.


    2700 Genesis Tutorials

    October 2, 2013 at 9:43 pm #65166
    AHereld
    Member

    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?

    October 2, 2013 at 9:47 pm #65167
    Brad Dalton
    Participant

    Easier to install a plugin for this.

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


    2700 Genesis Tutorials

    October 2, 2013 at 10:03 pm #65170
    AHereld
    Member

    Thanks!

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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Genericon CSS Code Not Displaying Buttons’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble