Icons in footer next to text

Support
#1

Hi there,

How can I create icons + text inline like this in my footer:

Thank you so much! :slight_smile:

#2

Hello @artthescience,

Thanks for writing in!

You can make use of the classic icon shortcodes in combination of the texts just like this:

[x_icon type="map-marker"] Ottawa, Canada
[x_icon type="mobile-phone"] (613) 235 - 4048 ext: 303
[x_icon type="envelope"] pepah-pepma@ccsa.ca

You can find the icon shortcodes here:

Please let us know if this works out for you.

#3

This is great thank you! I know in the editor I can choose several styles of icons - light, heavy etc.

Is there a list of those shortcodes somewhere? The ones used above are too thick/heavy for the footer.

Thank you :slight_smile:

#4

Hello @artthescience,

Please be advised that the icons only displays the free Font Awesome icons. Light or heavy icons that you want to use may be part of the Font Awesome Pro version which is not available in the theme at the moment.

Font Awesome icons:

Hope this helps.

#5

How do I change the color of the icons when I use the shortcodes?

Thank you :slight_smile:

#6

I was referring to these choices:

#7

Hey @artthescience,

To set the icon’s color using shortcode, you need to add an Inline CSS code like this:

[x_icon type="adjust" style="color:red"]

For icons inside the element, there’s a color option for them under the Graphic Icon setup.

I’d like to correct Ruenel’s previous response about the Font Awesome Pro icons. They are included in our theme but just please note that the recent ones are not added yet.

For more information about Font Awesome in our themes, there’s a third-party video guide at https://www.youtube.com/watch?v=BXoaWjmpllI&list=PLw7aiQpJVjp9A8VSuE_WHeincN3pnnL7P

Hope that helps.

#8

This is really helpful! Thank you so much :slight_smile:

#9

You’re most welcome!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.