Docs

[patrobles]

Hi!
I was wondering if there’s a way to change the text on the card buttons to an Icon?
I tried doing this with my basic CSS skills using the code to select the button and then adding a shortcode. However it seems shortcodes dont quite work in CSS.

a.x-face-button {
  [icon type="envelope"]
}

I was wondering if there is a way to add this through CSS or custom HTML?
When I coded in html I would use code of this type to add glyphicons
<span class="glyphicon glyphicon-search"></span>

However I’m not all that familiar with php or wordpress to know where I would have to load the icons libraries (or how to access them since X already has them). I also have no idea how to add it through pure CSS or other means.

Any specific help would be appreciated, or a pointer to the right resources.

Here is the page im trying to change the buttons in http://104.156.237.188/~mamachanguito/wp/quienes-somos/representantes

[Christopher]

Hi there,

Please add the following code in style.css file :

a.x-face-button:before {
    content: "\f0e0";
    font-family: fontawesome;
    color: red !important;
}
a.x-face-button {
    color: transparent !important;
    width: 21%;
}

Hope that helps.

[patrobles]

Hi!
It works perfectly when im on the editor. However whenever I save my changes the line
content: "\f0e0"; changes and becomes content: "f0e0"; so then the Icon stops showing and the text f0e0 appears.
Is there any to avoid this?

Edit: Ok I put the code on my style.css file and it works almost perfectly now.
Problem is all the buttons have different sizes even tho there’s only the one width % instruction. I tried removing it so the button is large and I like the look of it, I would just like it with the icon centered in the button. How could I achieve this?

[Rupok]

Hi There,

Glad that it’s working. To control over the button size, you can add/change margin, padding, height. Or you can select fixed height and width –

a.x-face-button {
  height: 50px;
  width: 50px;
}

Hope this helps.

Cheers!

[Author]

Posts