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 8 years, 8 months ago by
AHereld.
-
AuthorPosts
-
March 6, 2013 at 7:21 pm #24684
Brad Dalton
ParticipantThis 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 #25900csbeck
MemberSorry, 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 #25901csbeck
MemberOK 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 Dalton
ParticipantIt 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 #65166AHereld
MemberBump.
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 Dalton
ParticipantEasier to install a plugin for this.
There's a couple to choose from which are really good.
October 2, 2013 at 10:03 pm #65170AHereld
MemberThanks!
Downloaded Genericon'd plugin and edited my CSS. Works flawlessly!
-
AuthorPosts
- The topic ‘Genericon CSS Code Not Displaying Buttons’ is closed to new replies.