Genericon CSS Code Not Displaying Buttons

[braddaltonParticipant Post count: 2553]

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>

---

WordPress Developer & Consultant
Brad Dalton @ WP Sites – Click Here to Get Genesis Child Theme Tips Delivered.

[csbeckParticipant Post count: 86]

Sorry, never used Gerenicons before.

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

Or did you get it to work?

[csbeckParticipant Post count: 86]

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?

[braddaltonParticipant Post count: 2553]

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.

---

WordPress Developer & Consultant
Brad Dalton @ WP Sites – Click Here to Get Genesis Child Theme Tips Delivered.

[Author]

Posts