Adding custom icons at various places to the Jupiter theme


#1

Problem:
There are many icons or social icons that are not available in the Jupiter theme.

Things to consider:
This cannot be achieved in the child theme. You will have to make these edits to the parent theme and the changes will be overwritten with the theme update.

Workaround:
Below, I will show you different places where you can add the custom icons.

Place 1:
Show custom icons in Jupiter Control Panel’s Icon library:

  1. Access your site using the FTP.

  2. Edit the icon-library.php file present in jupiter/framework/admin/control-panel/v2/panes/ folder.

Go to line 59 and press enter/return key so that you will move to empty line 60.
Now add the below lines of code from lines 60 - 62.

<span class="mka-select-list-item" data-value="themeicons">
	<?php esc_html_e( 'Theme Icons', 'mk_framework' ); ?>
</span>

  1. Edit the map.json file present in jupiter/assets/icons/theme-icons/ folder.

Go to the end of the line in the file and add data of your custom icon like below example:

"mk-jupiter-icon-custom":"e69c"

In the above example mk-jupiter-icon-custom is the class name of the icon that you can search in the icon library and e69c is the file name in which you will add the SVG code of the icon (shown in next step).

  1. Go to jupiter/assets/icons/theme-icons/svg folder and create a new file and name it same as above which in our example is e69c so that the file name is e69c.svg

  2. Now, the final step is to add the icon name to the config file. Edit the icons-list.php file present in jupiter/framework/admin/control-panel/logic/ folder.

Scroll to the bottom and add

1909 => array(
	'n' => 'mk-jupiter-icon-custom',
	'l' => 'themeicons',
),

Place 2:
Show custom social icons in Header. Let’s suppose we want to add the Houzz icon which is currently not available in Juptier theme.

  1. Add houzz icon name to $social_array in masterkey.php file present in jupiter/framework/admin/theme-options/ folder.

This will allow the Houzz icon name to show in the social networks list in the Theme Options.

  1. Add data about houzz icon at the end of map.json file present in jupiter/assets/icons/theme-icons/ folder.

"mk-jupiter-icon-simple-houzz":"e69c","mk-jupiter-icon-houzz":"e69d","mk-jupiter-icon-square-houzz":"e69e"

  1. Go to jupiter/assets/icons/theme-icons/svg folder and add 3 new files and name each of them as e69c.svg, e69d.svg and e69e.svg

Add normal icon svg code in e69d.svg file.
Add round icon svg code in e69c.svg file.
Add square icon svg code in e69e.svg file.


#3

Hi @Danish_Iqbal, I went through this and I’m having trouble with one part. I posted it on Stack Overflow:


#4

Okay, first of all where do you want to show the icons?? The header??

Can you share the site URL??

Also, did you follow the last step which is:

Go to jupiter/assets/icons/theme-icons/svg folder and add 3 new files and name each of them as e69c.svg, e69d.svg and e69e.svg

Thanks.


#5

Hi @Danish_Iqbal, I didn’t add e69d.svg and e69e.svg because I only need one icon. I’ll add the 2 other files and just add the same SVG code.

I can’t share the link for confidentiality reasons. And yes in the header. I can send a screenshot.

I’m going to try adding the other two files with the same SVG code.


#6

Hi @Danish_Iqbal, I added the last 2 files to map.json and created them in the /svg/ folder and it’s working now.

Thank you so much for posting article online!


#7

@Danish_Iqbal

Nice post, but could you be so kind to integrate this by default in the Jupiter theme?

After all, overriding default code of the Jupiter theme is not recommended…

… so it would be great if Jupiter theme default code would be flexible enough to support custom icons!

Kind regards…


#8

I’m glad it worked :slight_smile:


#9

Well, as of now, it’s not on cards but we may add it in the future.

Thanks.


#10

Yes +1 for this feature !!


#11

Cmon now… lets add this basic request to jupiter theme by default. I just want add one extra icon. Thought of just overwriting one icon i do not want but then it gets reset in next update…