How to Add Custom Icons

affilialex

+ 1 for custom icons! 

robertogrilloph

+1 custom icons

McCoyDesign

+1 for easy install custom icons.

But for now, this is what I did (you need to know what you are doing):

1. USING A CHILD THEME, backup!

2. Go the Appearance > Theme Editor > functions.php

3. I pasted this in the very bottom of the functions.php file:

/* ---------------------------------------------------------------------------

 * Link FontAwesome 5

 * --------------------------------------------------------------------------- */

add_action( 'wp_enqueue_scripts', 'tthq_add_custom_fa_css' );

function tthq_add_custom_fa_css() {

wp_enqueue_style( 'custom-fa', 'https://use.fontawesome.com/releases/v5.7.2/css/all.css' );

}

________________________________________________________

On the widget/page/post where I wanted the icon to appear, I add

<i class="fab fa-facebook-square"></i> (wrapped in a hyperlink)

<i class="fab fa-instgram"></i> (wrapped in a hyperlink)

See fontawesome.com for all the icons' coding.

Drigoro15

+1

RHuck

Your icon list is horribly small. People have been begging you now for 3+ years to add a custom icon option. Just do it already.

KSPReportages

its possible add a custom icon? 

Pablo

KSPReportages,

Sadly, BeTheme does not allow to upload custom icons yet.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WebBat

C'mon add custom icons. It's the first paid theme i'm using without such a simple feature.

Pablo

Hello @WebBat,

Sorry, but we do not have this kind of feature.

But, we can tell that there will be a lot more icons in the future :)

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

axelavi33

I need to be able to add a stupid icon as well.

I can't believe such an easy thing can't be done. You just have to add the icon thing on the specific folder and do the callout with the icon.

After 5 years of ppl asking for icons this thing is not implemented. Extremely disappointed.

hillwoodweb

I have a workaround for this problem if you are trying to use the icon box. Here are the steps I took to use the Font Awesome icons.

1.      Add the Font Awesome plugin https://wordpress.org/plugins/font-awesome/

2.      Go to the page where you want to add your Custom Icon.

3.      Create your section and add your Icon Box. Use any Icon that BeTheme has in its list

4.      Now, view the page. You should be on the front-end now

5.      I am using Chrome, so I right-click in the icon box area and click inspect (Google Web Tools).

6.      I copied the HTML from Edit HTML (the three dots on the left of the first div). The next step shows the HTML that I copied

7.      <div class="icon_box icon_position_top no_border"><div class="icon_wrapper"><div class="icon"><i class="icon-chart-bar"></i></div></div><div class="desc_wrapper"><h4 class="title">Services</h4><div class="desc"><span style="color: rgba(255,255,255,.6)">For business owners not seeking to sell control, or in other special situations, we provide a range of solutions from credit to minority equity investments. Our flexibility addresses the unique capital needs of private companies. Learn More »</span></div></div></div>

8.      Now, to use the custom icon from Font Awesome replace the icon tag <i class="icon-chart-bar"></i> in the HTML with the Font Awesome short-code [icon name="handshake" prefix="far"]. Your HTML should look like the next step.

9.      <div class="icon_box icon_position_top no_border"><div class="icon_wrapper"><div class="icon">[icon name="handshake" prefix="far"] </div></div><div class="desc_wrapper"><h4 class="title">Services</h4><div class="desc"><span style="color: rgba(255,255,255,.6)">For business owners not seeking to sell control, or in other special situations, we provide a range of solutions from credit to minority equity investments. Our flexibility addresses the unique capital needs of private companies. Learn More »</span></div></div></div>

10.  Got to edit your page. You cannot use the "Icon Box" anymore so remove it. and instead use the BeTheme “Column” and paste the HTLM into the “Content” of the “Column” section. What you are doing is basically embedding the “Icon Box” HTML into the “Column.”

11.  If you have the Icon box linking to something make sure you copy the <a></a> tags as well when you inspect. 

+1 I agree BeTheme should make this where you can add custom icons. It should be hard to do this just allow shortcodes to be used in the Icon Box. I already did half the work for you by the example above.

hillwoodweb

To add to my previous comment you can add the Font Awesome HTML <i></i> as well. <i class="fas fa-handshake"></i> in Step 8 instead of the shortcode

annaf59

So... we can't add custom icons, right?

Pablo

Hello,

You can add custom icons using the Icomoon app, see the docs here:https://muffingroup.com/betheme/features/custom-icons/

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next