Slider Icon instead of picture

Beaver Builder
1

Hi,

Is there a way to have an icon within a content slider? I only see options of text, test with photo, text with video or none. Can I manually ad some icon code in there because I would like to have an icon at the top with a heading below followed by some text underneath.

Best,

Peter

2

Hey Peter,

Welcome to the BB forums! :slight_smile:

Icons can be added manually by entering a certain markup, e.g., for a FontAwesome Bluetooth icon to be added, you can add the markup <i class="fa fa-bluetooth"></i> provided the FA assets are loaded. Check the link below for more info. :slight_smile:
http://fortawesome.github.io/Font-Awesome/icon/bluetooth/

Ben

3

ok great, yes I know how to do that, but I would like to have the circle background with my icon. Can you give me an example of say a larger bluetooth icon with a blue circle background please? I do not know how to code the the circle backgrounds?

Peter

4

Hi Peter,

Font Awesome actually provide some examples and one of these examples, is stacking icons. You can use this example to create your icon with a circular background.

Add the following HTML to your module.

<span class="fa-stack fa-5x my-blue-icon">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-bluetooth fa-stack-1x my-white-icon"></i>
</span>

Once saved, go to your custom CSS and add the following:

.my-blue-icon {
    color: blue;
}
.my-white-icon {
    color: white;
}

You may want to replace the blue value to your preferred blue color. If you feel the icon is too large, you will want to tweak the fa-5x class name in the HTML code. You can see more examples and size values on the Font Awesome website here - http://fortawesome.github.io/Font-Awesome/examples/

The final outcome of that code will look something like this - https://cloudup.com/cdvYBLevXG7

Thanks,
Danny

5

thank you, how do I get that icon into a content slider? I would like to have an icon title and text for each slide.

6

Hey Peter,

Simply add the code shared by Danny above wherever you see fit. :slight_smile:

Ben

7

thanks! ok I figured out that by adding the code into the header of the content slider it works, however I set some text as large h3 to act as my header in the text area and then some paragraph content but it renders the same size on mobile. How can I still have a icon larger header and text for mobile in my slider?

8

Hi Peter,

Can you provide a link to your site, so we can see what you’re referring to, please?

Thanks,
Danny

9

you can see an example here. www.qponkraze.com/b

I have the Great savings as a header 2 I believe with larger font

and the rest is smaller paragrahp

but on mobile it is the same size…at lease for my iphone 6

10

Hi Peter,

So it looks like you have added the h2 tag into the slider text container. This has a styling that sets the font on mobile devices to 14px. Therefore, there is no way to override it using an option.

You can do do it via CSS, add the snippet below to your custom CSS.

.fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text h2 {
    font-size: 30px !important;
}

Change the font size value to whatever you like.

Thanks,
Danny

11

hi, sorry about the delay. I added the code .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text h2 {
font-size: 30px !important;
}

…but for some reason it doesn’t save on my custom css…I am using your child theme

12

Hi Peter,

Can you replace the CSS I gave you previously, with the following, please.

@media (max-width: 768px) {
  .fl-builder-content .fl-module-content-slider .fl-slide .fl-slide-text h2 {
    font-size: 30px !important;
  }
}

If this doesn’t work, can you provide temp admin access, please? So we can take a closer look.

Thanks,
Danny