Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genericon CSS Code Not Displaying Buttons
Tagged: CSS Buttons, Genericons, genesis
- This topic has 6 replies, 3 voices, and was last updated 10 years, 5 months ago by AHereld.
-
AuthorPosts
-
March 6, 2013 at 7:21 pm #24684Brad DaltonParticipant
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>
March 13, 2013 at 12:24 pm #25900csbeckMemberSorry, 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 #25901csbeckMemberOK 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 #26094Brad DaltonParticipantIt actually works with some themes but not with others so its a problem with the CSS.
Esmi from WordPress.org might know the answer.
October 2, 2013 at 9:43 pm #65166AHereldMemberBump.
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 #65167Brad DaltonParticipantEasier to install a plugin for this.
There's a couple to choose from which are really good.
October 2, 2013 at 10:03 pm #65170AHereldMemberThanks!
Downloaded Genericon'd plugin and edited my CSS. Works flawlessly!
-
AuthorPosts
- The topic ‘Genericon CSS Code Not Displaying Buttons’ is closed to new replies.