Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 26, 2018 at 4:10 am #990020
    yingyang

    Is it possible to use bootstrap button in Enfold? as documented here https://coreui.io/docs/components/buttons/

    tried adding this code

    <button type="button" class="btn btn-brand btn-youtube">
  <i class="fa fa-youtube"></i><span>Youtube</span>
</button>

    To have a button like that
    https://i.imgur.com/43ZYIvN.png

    but instead the button shows up like that
    https://i.imgur.com/YNCPTyG.png

    Also how can i add a URL to this button so that when clicked the uRL loads?

    • This topic was modified 6 years, 1 month ago by yingyang.
    July 26, 2018 at 10:12 am #990137
    Ismael

    Hey kilimats,

    Thank you for using Enfold.

    You have to load the bootstrap resources first. It looks like that because the element styles are missing.

    Here’s some of the ways you can load those resources. https://coreui.io/docs/getting-started/introduction/

    Best regards,
    Ismael

    July 26, 2018 at 10:27 am #990151
    Guenni007

    If you have no concerns about GDPR, you can enqueue the styles of Fontawesome via CDN.
    So you can use it manual – but problem would be that these sources need the newest jQuery – not that common one that Enfold uses !
    You can do it via functions.php of your child-theme:

    add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
function enqueue_awesome() {
  wp_enqueue_style( 'prefix-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
}

    So my Advice is to use fontello fontawesome – import that to Enfold and use it with Enfold buttons.
    To style the buttons a bit more you can do that: https://webers-testseite.de/buttons/

    these are Enfold Buttons Alb with light-transparent layout and a bit of css

    July 26, 2018 at 10:19 pm #990477
    Guenni007

    i loaded the fa from maxcdn and the styles from the link ismael gave:

    add_action( 'wp_enqueue_scripts', 'enqueue_awesome' );
function enqueue_awesome() {
  wp_enqueue_style( 'prefix-font-awesome', 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
  wp_enqueue_style( 'font-awesome-styles', 'https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css', array(), '1.0' );
}

    the only thing to correct was in quick css a bit:

    .btn { font-weight: 600 !important}
.btn-brand i { font-size: 22px }
.btn-brand i { margin: -.375rem .75rem -.375rem -.75rem }

    and don’t make line-breaks in text-field:
    <button class="btn btn-brand btn-youtube" type="button"><i class="fa fa-youtube"></i>Youtube</button>

    Edit : i removed the code above from my test-page now – because It does not meet the requirements of the GDPR

    July 27, 2018 at 10:18 am #990609
    Ismael

    Hi,

    Thanks @Guenni007! :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.