Okay
  Public Ticket #1054216
Move Font Awesome icon to before text on button
Closed

Comments

  •  2
    Larry Levenson started the conversation
    February 8, 2017 at 8:04pm

    When I create a VC Button and add a Font Awesome icon, it shows up to the right of the text, and only on hover.

    I want to create an effect like the attached image, where the FA icon shows up a little to the left of the text, and in the non-hover state.

    Can you provide some guidance in the CSS i might use?

    Thanks!

  •  8,459
    Tahir replied
    February 9, 2017 at 3:03pm

    Hey Again

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    .nectar-button i {
    right: auto !important;
    left: 10px !important;
    opacity: 1!important;
    -ms-filter: "alpha(opacity=100)";
    -ms-transform: translateX(6px);
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
}
.nectar-button.has-icon:hover span, .nectar-button.tilt.has-icon span {
    -ms-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Larry Levenson replied
    February 10, 2017 at 8:16am

    Brilliant! Thank you, Tahir.