Genericon CSS Code Not Displaying Buttons

[Brad Dalton]

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

[csbeck]

Sorry, never used Gerenicons before.

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

Or did you get it to work?

[csbeck]

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?

[Brad Dalton]

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

[AHereld]

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?

[Brad Dalton]

Easier to install a plugin for this.

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

---

2700 Genesis Tutorials

[AHereld]

Thanks!

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

[Author]

Posts