Align icon to the right?

Beaver Builder
1

I am trying to move an icon to the right of the text near the border in the following image:
http://imgur.com/WCLRU8K

Is it possible somehow?

Best regards,
Michael

2

Hi Michael,

You can do this by adding a custom class to your Icon module. For example align-right-icon. Once added use the following code:

.align-right-icon .fl-icon-wrap {
    display: flex;
}
.align-right-icon .fl-icon {
    order: 3;
}
.align-right-icon .fl-icon-text {
  order: 2;
}

Alternatively, you could use custom HTML instead. Something like this:

<ul class="list-unstyled">
  <li>Video Demonstations <i class="fa fa-check-square-o"></i></li>
  <li>Video Demonstations <i class="fa fa-check-square-o"></i></li>
  <li>Video Demonstations <i class="fa fa-check-square-o"></i></li>
</ul>

Please, be aware that HTML above, is using Bootstrap CSS that is bundled with the BB Theme.

Thanks,
Danny

3

Hi Danny,

Thanks for trying to help. Unfortunately it doesn’t work entirely as expected. Here are some results:
Firefox (cache cleaned) - http://imgur.com/1w48X2A
Safari (cache cleaned) - http://imgur.com/qULh6Cd

Any advice?
Perhaps you could suggest developers to add an option in a future update of BB to allow right alignment for icons?

Best regards,
Michael

4

Hi Michael,

I think the best course of action is to use the HTML module like I mentioned previously. This way you have full control on how the icon and text appear.

For a full list of icons, see the Font Awesome icons site here - https://fortawesome.github.io/Font-Awesome/examples/

Thanks,
Danny