• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

Add MD Icons anywhere!

I think this is a development that will change the way you use MD. You can now use MD Icons anywhere in the Block Editor visually.
1616679658492.png

You can install the md-icons-gutenberg.zip file as a plugin and it only works with Marketers Delight and its child themes.

Do whatever you want. Insert social media icons, create icon buttons, better headings and more.

@Alex will hopefully add this in next update to MD core — so worry not. This plugin can be deleted once the next big update comes.

More power to you!
 

Attachments

  • md-icons-gutenberg.zip
    15.3 KB · Views: 10

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,497
Reaction score
1,826
You continue to amaze me with your theme mods. :love: I've been sketching out a way to make the icon library more dynamic because on projects I keep wanting to add new icons and can't stand to include the entire Font Awesome library. So this is a good nudge in that direction.

I wonder, could the native md_icons() function be helpful here? You can see the source in lib/api/icons.php and that would make this mod far more dynamic especially once we have the ability to add/remove icons from the MD admin panel.
 
Comment

gauravtiwari

Blogger
Md
Messages
266
Reaction score
114
Website
gauravtiwari.org
Yes. That can be done. All you need is to figure out a way to insert the active icons' classes into /src/icons.json in the plugin separated by commas.
 
Comment

gauravtiwari

Blogger
Md
Messages
266
Reaction score
114
Website
gauravtiwari.org
One more thing, if the font-icons file doesn't include an icon, it won't show in the editor even if you add all the classes in the icons.json file.
 
Comment

gauravtiwari

Blogger
Md
Messages
266
Reaction score
114
Website
gauravtiwari.org
Here are the icons you must add to icon-font:
  1. amazon icon — very essential for affiliates.
  2. home icon — to use in navigation menu as well as breadcrumbs.
  3. icon-hand-o-right — to use in lists and CTAs.
  4. icon-star-half-o and icon-star — star icon is not geometrical and is very pointy as of now. You can use a better version of it. Half star is important if I want to rate something 4.4, 4.5, 4.6, .., 4.9 stars.
I have attached the gt-icons that I use here and there on gauravtiwari.org. My custom version of plugin loads these as well.

1616692786444.png
 

Attachments

  • gt-icons.zip
    22.4 KB · Views: 3
Last edited:
Comment

gauravtiwari

Blogger
Md
Messages
266
Reaction score
114
Website
gauravtiwari.org
I think this is a development that will change the way you use MD. You can now use MD Icons anywhere in the Block Editor visually.
View attachment 3124

You can install the md-icons-gutenberg.zip file as a plugin and it only works with Marketers Delight and its child themes.

Do whatever you want. Insert social media icons, create icon buttons, better headings and more.

@Alex will hopefully add this in next update to MD core — so worry not. This plugin can be deleted once the next big update comes.

More power to you!
Updated version attached. Compatible with 5.2.3
 

Attachments

  • md-icons-gutenberg.zip
    15.3 KB · Views: 2
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,497
Reaction score
1,826
Updated version attached. Compatible with 5.2.3
Good stuff. My recommendations to make this fully compatible with the new icons tools in MD5.2.3:

1. Instead of hard coding the path to the md.woff file in editor.css, use the new md_font_icons_url() function to dynamically render the URL. This function checks the child theme for md.woff and loads that if it exists, otherwise it falls back to the default icon file.

2. You can get a list of all icon IDs, including any custom icons added through MD Icons with this function: md_get_icons( 'ids' ). This will save you from having to manually maintain your icons list here.

I am still evaluating to see if this is a good fit for inclusion in MD core, but at the least this is a very nice to have plugin.
 
Comment

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
As of today, what is the best way for to use @gauravtiwari 's icons? I'm especially interested in the Amazon one. What process should I follow based on your latest exchanges?
 
Comment

Some French Dude

SomeFrenchDude
Md
Messages
1,044
Reaction score
120
@gauravtiwari , do I need to do anything else?
1. @Alex suggested a way for easy maintenance?
2. So your icon list has not been integrated into MD core as of today?
3. What if I want insert an icon a button or in a heading? Is there a GUI way to do so?

Thanks so much for sharing. We love having you here in the community.
 
Comment

gauravtiwari

Blogger
Md
Messages
266
Reaction score
114
Website
gauravtiwari.org
@gauravtiwari , do I need to do anything else?
1. @Alex suggested a way for easy maintenance?
2. So your icon list has not been integrated into MD core as of today?
3. What if I want insert an icon a button or in a heading? Is there a GUI way to do so?

Thanks so much for sharing. We love having you here in the community.
1. He did but I am 3 out of a perfect 10 in PHP. I'll learn how to do that.
2. Not yet.
3. You can use this to add icon literally everywhere in the content. Button, List, Link, Code, Paragraph, headings and whatnot.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,497
Reaction score
1,826
Really like it and want use it for classic editor. Any roadmap integrate it with tinymce?
It's a good idea, probably best to make a new feature request and we can gauge interest. I don't see WordPress totally eliminating TinyMCE, so it seems worthwhile. We've already built a couple of icon pickers into MD so far:
 

Attachments

  • Screen Shot 2021-09-01 at 3.33.07 PM.png
    Screen Shot 2021-09-01 at 3.33.07 PM.png
    48.9 KB · Views: 4
  • Screen Shot 2021-09-01 at 3.33.44 PM.png
    Screen Shot 2021-09-01 at 3.33.44 PM.png
    126 KB · Views: 4
Comment
Top