Using inspector element for any button, you can find the following HTML tags:

Flatsome uses a native pack-icon fl-icons for buttons. There is a class for every icon found in UX Builder:

Here’s a longer list that can be used with classes & content in any other place, not just buttons – Codepen

These native Flatsome Icons are FontAwesome icons, packed into the theme to be loaded more easily. In case you need to add another custom icon while keeping the same style, pick one from FontAwesome website.

How to use FontAwesome custom icons in Flatsome buttons?

1. Use a class that has low chance of being useful later (I chose ‘icon-twitch)

2. Add pseudo CSS class in Customizer / Child theme style.css 

.icon-twitch:before {
	content: ""!important;
	font-family: "FontAwesome"!important;
}

2.a. Go to FontAwesome and choose the icon you need

2.b. This ‘question-mark’ sign is a Gliph icon. Copy the Gliph version of the icon needed, and add it to the CSS snippet above;

3. Manually enqueue the Font Awesome link into functions.php 

function enqueue_load_fa() { wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v6.1.1/css/all.css' ); }
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa');

Here is the final result:

How to add an icon to a header button?

The header’s buttons don’t have any option to add the icon, so it can be done by css: 

.header-button-1 .button span:after {
       display: inline-block;
       font-family: "Font Awesome 6 Free";
       float: right;
       content: "\f0c9";
       font-weight: 600;
       margin-left: 1em
}

The same style can be added to form buttons.

See: Understanding Flatsome Buttons

Similar Posts