Icon font manager about elementor

[cbrcongit]

Solved IcoMoon custom icons for Elementor:

1 . Create a plugin with the following

<?php
/**
 * Plugin Name: Custom Elementor IconBox
 * Description: Override Elementor's 'Icon' control to include custom icon packs.
 * Author: @cbrcongit, @albionselimaj, @ryanlabelle
 * Version: 0.5
 * Site: https://github.com/pojome/elementor/issues/110
 */
define( 'PLUG_VERSION', '0.5');
define( 'PLUG__FILE__', __FILE__ ); 
define( 'PLUG_PLUGIN_BASE', plugin_basename( PLUG__FILE__ ) ); 
define( 'PLUG_URL', plugins_url( '/', PLUG__FILE__ ) ); 
define( 'PLUG_PATH', plugin_dir_path( PLUG__FILE__ ) ); 
///
add_action( 'elementor/init', function() {
if ( ! defined( 'ABSPATH' ) ) exit;
class Elementor_Control_Icon extends Elementor\Base_Control {
	
	public function get_type() {
		return 'icon';
	}
	public static function get_icons() {
		return [
			'icon-noun_977768' => 'professional',
	        'icon-noun_977793' => 'health safety',
	        'icon-noun_1245026' => 'bicycle',
	        'icon-noun_1248182' => 'engineer mechanical',
	        'icon-noun_1258170' => 'engineer solve',
	        'icon-noun_1267333' => 'human resources',
	        'icon-noun_1273446' => 'engineer fit',
	        'icon-noun_1273443' => 'manager',
	        'icon-noun_1278287' => 'cold',
	        'icon-noun_977698' => 'technician',
	    ];
	}
	protected function get_default_settings() {
		return [
			'icons' => self::get_icons(),
		];
	}
	public function content_template() {
		?>
		<div class="elementor-control-field">
			<label class="elementor-control-title">{{{ data.label }}}</label>
			<div class="elementor-control-input-wrapper">
				<select class="elementor-control-icon" data-setting="{{ data.name }}" data-placeholder="<?php _e( 'Select Icon', 'elementor' ); ?>">
					<option value=""><?php _e( 'Select Icon', 'elementor' ); ?></option>
					<# _.each( data.icons, function( option_title, option_value ) { #>
					<option value="{{ option_value }}">{{{ option_title }}}</option>
					<# } ); #>
				</select>
			</div>
		</div>
		<# if ( data.description ) { #>
		<div class="elementor-control-field-description">{{ data.description }}</div>
		<# } #>
		<?php
	}
};
});

// ENQUEUE // Enqueueing Frontend stylesheet and scripts.
add_action( 'elementor/editor/after_enqueue_scripts', function() {
    wp_enqueue_style( 'icomoon', plugin_dir_url( __FILE__ ) . 'style.css' );
});
// FRONTEND // After Elementor registers all styles.
add_action( 'elementor/frontend/after_register_styles', 'icons_enqueue_after_frontend' );
function icons_enqueue_after_frontend() {
    wp_enqueue_style( 'icomoon', plugin_dir_url( __FILE__ ) . 'style.css' , array(), PLUG_VERSION);
}
// EDITOR // Before the editor scripts enqueuing.
add_action( 'elementor/editor/before_enqueue_scripts', 'icons_enqueue_before_editor' );
function icons_enqueue_before_editor() {
    wp_enqueue_style( 'icomoon', plugin_dir_url( __FILE__ ) . 'style.css' , array(), PLUG_VERSION);
}

add_action('elementor/controls/controls_registered', function($el) { 
  $el->register_control('icon', new Elementor_Control_Icon); 
});
?>

2. Use a custom font you created in the icomoon font generator. I usually find great SVG's from awesome designer's work at The Noun Project

3. Move the Icomoon style.css into the plugin root like this

4. The array in the plugin above (e.g. '**icon-noun_977768**' => 'iconchooser name of icon',) makes reference to the downloaded Icomoon stylesheet (style.css) ID's (e.g. .**icon-noun_977768**:before { content: "\e900";})

• Tip: use regex to search your stylesheet and quickly grab all classes to build a new array e.g. (?<=.)(.*?)(?=before), then find & replace the : with ' => 'iconlabel',

5. The original Elementor array can be found in ..plugins/elementor/includes/controls/icon.php

(..aaand finally got it. posted this comment with really stupid missing pieces at first - sorry.)

[Kpudlo]

Really hoping to see this make it in Elementor!

[badcat]

Yes! Would love to have the ability to make a call to any of the existing Font Awesome library icons from within the Social Icon section.

[About2git]

Yeah, this would be great. We could use: http://fontello.com/ Where you even can upload own icons and json and co. is automatically generated…

[drawcard]

So far working with Elementor has been an awesome experience.

I second this :) My entire WP workflow has changed (for the better) thanks to this plugin 💪

[cbrcongit]

@albionselimaj I'm having trouble 'connecting-the-dots' by recreating the solution in your comments;
Can you please

• Create a Repo with the full directory structure and modified + added files

• Include an IcoMoon set (and other IcoMoon files for context/reverse-engineering)

emphasis on context (e.g. where files go, how the arrays are obtained/written for custom font folders, etc)

.
.
.

If I can try to summarise this issue, and offer solution to it still being open/unresolved:

Description

• Iconbox has a "fixed list" of FontAwesome icons to choose from. The list is not exhaustive (quite limited).
• • @drawcard "IcoMoon is one of the bigger generators out there, and creates very customisable and clean CSS / SCSS as well."...
• • • Further, for product strategy, imagine the amazing designs we could attribute to Elementor enabling TheNounProject+IcoMoon graphical elements! (Docs, docs, docs!)
• • @luizbills "And [add the ability] to remove the default font awesome (if the user wants)."
• There is no function for uploading custom icons.
• The docs on how to add custom icons (e.g. IcoMoon, Fontello, etc) are not available; There are some broken threads of an idea posted here: #110

Steps to reproduce

1. Add an IconBox Widget and select it to 'Edit Icon Box';
2. In the 'Edit Icon Box' sidebar, open the dropdown selector labelled 'Choose Icon';
3. Reveal a very limited and uncustomisable list of icons;
4. Try to add custom icons; Fail, Waste Time, lose hope in the product;
5. Ask again for a resolution to the issue...

Environment

All

Keys to Issue-Resolution

• Create a Plugin enabling IcoMoon, Fontello, and other custom Icon services/soultions (likely based on concepts developed by @albionselimaj https://gist.github.com/albionselimaj/3b569012a296cc27ecbe800e97e3a6e2)

[albionselimaj]

@zeinnicholas The font file should return an array of class names (e.g. for Font Awesome, return ['fa-address-book', 'fa-adjust', ...];.

Also, make sure to enqueue the font styles in the elementor preview using elementor/editor/after_enqueue_scripts action hook, e.g.

add_action( 'elementor/editor/after_enqueue_scripts', function() {
    wp_enqueue_style('font-awesome', get_template_directory_uri() . '/assets/styles/vendor/font-awesome.css');
});

Yes, I've managed to make it work, and am using it in a project.

Font Awesome class list (gist)
Material Icons class list (gist)

[ryanlabelle]

Hey guys, we created a widget plugin that adds custom icons, feel free to use it as an example.

https://github.com/ryanlabelle/th-widget-pack

[drawcard]

PNG Icons

& SVG icons too ;)

[drawcard]

At this point in time I'd be happy with just some sort of primitive option to upload your own SVG's, give them a unique identifying name, and then pick them from the selection that sits on top of Elementor's default FA set. Not sure if anyone else agrees with that or not, but that could speed up the path to getting us custom icons in E.

[TomRaraAvis]

+1 for any custom SVG on all elements that support icons

[fxaviers]

+1

[IamSiddharth]

+1

[knightknight]

+1

[ryanlabelle]

We are working on a custom control for now but it would be very helpful to provide a hook like #1260 but also a way to include a whole font library.

Thank you. So far working with Elementor has been an awesome experience.

[albionselimaj]

While probably not the best approach, a workaround to adding custom icons would be to override the Elementor Icon control class with a custom class, and adding the extra icons in the 'get_icons()' method.
See example.

[mgpub]

+1 - I've already been limited by the small selection of icons on multiple projects

[iFillip]

Hey there!
Just recently started using Elementor and found that I could sure use this "icon font manager" feature. All the above suggestions about fussing around with bits-n-parts of the website, I apologize, I don't have the tech knowledge nor the time. Just want to click-select-style-update-and-go. Looking forward to you kind Elementor Developers to make this happen with Elementor 2.xx. Thank you... m(_ _)m

[eblosch]

+1 for support of custom icon font management

[Raccroc]

@kingfisher64 no, I didn't. I pretty much ran into a lot of the same issues as @DeoThemes with most everything I tried either breaking Font Awesome, screwing up other widgets, or not working consistently. I largely gave up since the dev teams seems way more interested in putting out features to facilitate the rapid cookie cutter deployment of web sites (templates, copy & paste elements, etc.).

I decided to roll out with "good enough" for now so I can begin working our our Intranet site. I am testing alternative builders to use so that once completed, I can come back and rewrite our web site using the different builder and implement custom icons (we are also having our logo designer create a full custom icon suite to match our logo/branding, and going this route removes a lot of the pressure to rush them).

There is a lot to like about Elementor (I especially like the move away from needing much from your theme, like custom headers/footers) and the Pro support is excellent. But if custom icons are at all important to you, there are better builders out there (and I wish I had know that before I got as far along as I did).

[bentalgad]

Great plugin that will let you add any custom icons font to elementor core options:
https://wordpress.org/plugins/custom-icons-for-elementor/

[kingfisher64]

@bentalgad - you got there just ahead of me! https://wordpress.org/plugins/custom-icons-for-elementor/. Finally a solution.

Could be useful if we can simply insert an icon also in the standard Text Editor Widget as a span element.

[drawcard]

IcoMoon is one of the bigger generators out there, and creates very customisable and clean CSS / SCSS as well. The CSS follows a very similar convention to FontAwesome too. Would be great to support that.

I like @badcat 's idea too, about choosing whatever icon you please in the Social Icon section, to take care of niche services like Slack or Discord.

@luizbills that's a good point about removing FA if it's not desired, no point in loading that library if you aren't using it at all :)

[pingram3541]

Yes please, it would so nice to allow for font-awesome icons in the social element so we can choose generic icons to link to services not listed?

[maxnaud]

I second to that, other Page Builders have the feature to at least choose a custom file as icon. Thanks!

[nickdgreen]

when choosing an icon it would be great to be able to have the option of adding the "fa fa-code" of a font awesome icon giving access to any new icons not currently included in the dropdown list.

[drawcard]

That is a top notch idea, though probably something that only coders would understand. ~~~Still it could be toggled on or off as "advanced features" in the settings page.~~~

Perhaps another idea is to simply have a checkbox toggle that hides the standard FA icon set, and then that activates the custom icon class refs option. Effectively replacing the icon with a blank "placeholder" that you could substitute with say, "material-icon-flag" etc. while getting all the icon customisation goodness in Elementor.

[black-eye]

+1

[ramonkcom]

+1

[GreenRidingHood]

@albionselimaj thanks for sharing!!
I am usually try to not to edit PLUGIN file, Is there any suggestion without touching wp-content/plugins , because If I remember correctly they will gone with every update

thanks

[ianstudio]

Pleeeeeaaaaase this is important.. btw the new https://visualcomposer.io/ has a decent Icon tool with several icon fonts, though they do not let you upload your own.. But still much better than "ours" :/ You cannot let the competition get the better of Elementor :0)

[fthiesen]

+1

[albionselimaj]

@GreenRidingHood you don't have to touch the wp-content/plugins directory, just put that code in your theme. It overrides the default Icon class through the elementor/controls/controls_registered action.

[GreenRidingHood]

@albionselimaj I will try , thanks 👍

[renathosiqueira]

+1
Will be GREAT can add more icons to Elementor!

[zeinnicholas]

@albionselimaj Hey, I liked your idea as a temporary solution. Can you elaborate more on that? Like what you need to do in each "path/to/font.php" file called in the array? Just declare the classes as what's already being done in the original control, or we need to do more than that? I'm almost figuring it out, but I think I'm missing something. Did you managed to make it work?

[lizrosenshine]

+1

[drawcard]

What if there was the ability to upload your own SVG's (say in the General Settings page) and just have elementor treat them as custom icons that can be selected from the icon library? They could have the same classes applied to them so they work just like regular icon fonts, but you also have the advantage of using whatever you want without loading up extra fonts etc.

[ianstudio]

@drawcard This extension does it fairly well, though I wish it had a coloring option for regular and hover states.. but they think that since some svg' cannot be colored correctly it would not be a good idea, I beg to differ, a lot of svg's are single-colored and would work perfectly that way (I do use it for icons and add my color states in css).
https://wordpress.org/plugins/inline-svg-elementor/

Not quite on the same tack, but similar. Or should I start a new thyread?

Could the Icon set (in Price Table) have a 'none' option, so the text renders in a nice block without any icon or first-line indent.

Thanks, David

[drawcard]

You should probably a start new issue @davidmcc3 or else it will probably get overlooked in the discussion of this one 😉 It's a good idea you have there.

[zeinnicholas]

@cbrcongit I couldn't make this work either... My solution was to manually change the Icon.php file (poor solution) and add my icon font manually. But I have to redo this every time I update Elementor...

[cbrcongit]

Ok, so I've used the brilliant work of @ryanlabelle (who had too much extra stuff) and @albionselimaj (who was missing pieces), and created a plugin in this repo: cbrcongit/elementor-select-icon that should simplify our next steps to resolve.

• 👍 fixed the load hook problem that was making this difficult to implement as a plugin (e.g. add_action( 'elementor/init', function() { "Deal with Elementor controllers here" }); )
  ↻ @zeinnicholas, @GreenRidingHood,

• 👍 successfully listed all custom icons in the 'Choose Icon' dropdown

Final fixes required

• I'm still not seeing any of the IcoMoon icons that have been added though, they list, but they do not display on the page - @albionselimaj and others here, do you think you could have a look and see what we're missing? Please 🥇
  ↻ @drawcard

• Still no progress on an 'add your own custom icons' simple UI solution as part of the Choose Icon process; More urgently concerned with the third dot-point (above) though, resolving the use of icomoon fonts for REAL CUSTOM ICONS.
  ↻ @ianstudio @About2git

[drawcard]

Nice one @ryanlabelle @albionselimaj @cbrcongit 👍 🆒 😎

I will have a test and see if I can have a shot at resolving the fixes.

[zeinnicholas]

@cbrcongit

very nice! Thanks! I will take a look.

About not seeing any of the IcoMoon icons, what do you mean?

1. The plugin works, it lets us select custom icons, but it only shows on the front-end (not able to see them in the visual builder).
2. The plugin works, as we can see the files are loaded, but it does not let us to select any custom icon. We can only call it's CSS class, but we can still see the custom icons on the front-end.
3. Nothing happens at all for IcoMoon custom icons only. But other famous font icons (like Material and FA 5) work brilliantly.

[cbrcongit]

@pojome is this something you can help close-out? And/Or are you looking at adding an "upload your own icon" noncoder feature to choosing icons?

I'm new to github public threads, but usually check in with the dev - are you still looking at this issue as prioirity?

[zeinnicholas]

@cbrcongit This is what I was using to add custom icons:
https://gist.github.com/zeinnicholas/9829a0b32d74bc8aaccb16203d4a8047
Basically I opened the icon.php file directly in Elementor, and added the icon list (a custom icoMoon pack I made). at line 1329 I managed to call the icon font using as reference that I got somewhere on the Elementor docs.

Maybe this fixes the issue?

Surely if we want custom icons (as of now) we should add them manually to the plugin and make this call, right?

[drawcard]

Just to clarify @cbrcongit's comment - I am not an expert PHP developer nor am I on the Elementor team (just a front end dev that's contributed a bit here and there to Elementor) but I am happy to have a poke around and see if I can figure out what's going on 😄

If FA5 is working, chances are it's because something is hardwired into Elementor that accepts the fa- naming system, but nothing else. That's my gut feeling anyway.

I've cloned the plugin and have set up a blank WP site to test things in, I was hoping to take a look but this week has been a bit crazy with Australia Day coming up on Friday. I'm pretty enthusiastic about finding a solution though so I will find a bit of time somewhere soon :)

[drawcard]

This is legendary, well done :)

You should submit it as a PR and get it merged into the main project!

[zeinnicholas]

Hey @cbrcongit is it working for you on Elementor 1.9.3?

I couldn't find to make it work with the files on your repo =/ It's like Elementor is ignoring the plugin...

[codeagencybe]

Is this a way to load FA5 pro icons into Elementor?
I'm one of the early adopters and backers on kickstarters and have my personal Pro license to use in my projects.

So I have many more options available now, but I can't use it everywhere.
I'm using the script to load FA5 into my project, but if I want to use e.g. iconbox, I still can not select any of the FA5 pro icons.

@cbrcongit Does your plugin can solve this? Or does anybody know a way how to pull this one off?

[oinformatico]

Hi
I took the tips that gave us back and improved the plugin. It has more than 1000 different icos. Hope you like it.

elementor-iconbox.zip

You can find more about our work in the https://www.informatico.pt/

[nathan-de-pachtere]

+1 for custom support and the possibility to integrate Font Awesome Pro 5

[oshibobo]

+1 for custom support and the possibility to add PNG Icons

[Raccroc]

Thanks for the elementor-iconbox.zip oinformatico, that helped with a couple sites (although, as an fyi, it did create issues with editing the social icon widget).

What I would really like to know is, is there is a solution to adding in custom icons or a solution on the near horizon road-map? People have be requesting this for well over a year and was hoping that it would be addressed in 2.x. Without an official way, you end up with a bunch of custom PHP/CSS files and edits...that makes it such a pain to make changes down the road and near impossible to hand of to anther user to support.

I am building a dog rescue site and need to use icons for things like bones, doghouses, collars, etc. and am about to be forced to scrap the entire site to rebuild in another builder if I cannot figure out a way around this limitation.

[parfilov]

+1

[DeoThemes]

I've implemented @cbrcongit code to create custom control with a list of custom icons. Now I'm struggling how to apply this control to my custom widget. Here is my code - https://gist.github.com/DeoThemes/af8a369b33dc8920118c82cae2af3078

It doesn't show controls in a custom widget, it's just empty. However this extension works fine with a default icon box widget.

UPD: It basically breaks all the widgets that uses font awesome icons.

[themedleb]

+1

[kingfisher64]

New to elementor, very much enjoying it.

One thing I keep thinking would be handy is from the icon drop down field on whatever element would be custom icons. Like now wanting to add an icon to a tab (without css background image hack).

How do I hack/add custom choices to this dropdown list?

@Raccroc did you sort it for your dogs site? :)

[KB-BL]

+1 for custom icons

[bodhi1970]

+1

[twerkema]

+1. Also a designer in need of being able to fully customize iconography.

[midastown]

+1

[bentalgad]

+1 for support of custom icon font management

[temsool]

opened in 2016, still nothing? 👎

[timcv]

My work is going all in on Elementor, this would be a killer feature.

[shilo-ey]

This feature has been added to Elementor Pro v2.6.0

Feel free to update

Thanks!