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.