How To Customize Hotspot Icons And Color

In the last couple of lessons, you learned how you can add hotspots and use them properly.

In this WP VR lesson, you will learn how you can customize hotspot icons and color.

Using Custom Hotspot Icons From Plugin #

While creating a hotspot, on the left side, you will see three fields called

• Hotspot Custom Icon
• Hotspot Custom Icon Color
• Hotspot Animation

These allow you to use custom icons provided by WP VR for your hotspots.

Follow the steps below to use these custom icons properly.

1. Click on the option under Hotspot Custom Icon.

2. Here you will be able to choose from over 900+ Fontawesome icons that you can use as the hotspot icons.

3. Next, click on the option below Hotspot Custom Icon Color and assign the color you want your hotspots to have.

**Please note, the hotspot color cannot be different for each hotspot. Any color you select here, all the hotspots in the tour will have the same color.

4. On Hotspot Animation, by default, it is turned on. This will give a continuous ripple animation on the hotspot to be more noticeable. You can turn it off if you don’t want any animation for the custom icons.

5. Now, these are custom icons and cannot be viewed on the tour preview. So, publish the tour and embed it on a page/post. Then preview the page/post and you will be able to see how it looks.

(**Click here to learn how to embed a virtual tour on a page/post)

Using Custom Hotspot Icons Of Your Own Choice #

You may not wish to use Fontawesome icons, rather, let’s say you wish to add an icon of your own choice.

In that case, you need to use a certain code snippet.

Follow the steps below to see how it works.

1. Choose an icon of your choice on your website.

Let’s say I want to use the following icon:

2. Then use the icon URL to prepare the following code snippet:

.custom-icon {
        height: 26px;
        width: 26px;
        background:
        url(" your image URL ") no-repeat center center / auto;
        border-radius: 12px;
        }

Here the “.custom-icon” is the class name. You can assign the height and width of your choice and use the icon URL in place of the background URL. And set a border-radius.

**Please note that if you use a large image, it will not be resized to an icon size. So use an image that is already in the right size for an icon.

Here’s how I have prepared the code:

**You may choose to use height, width, and radius of your own choice, but we recommend you to use the values used in this code snippet.

3. Go to Dashboard > Appearance > Customize.

Here go to the Additional CSS section and paste the code snippet you just prepared.

Then Publish/Save it.

4. Next, go to the Tour you created and go to the hotspot settings of the hotspot for which you want to use this icon.

Here, on the bottom-left side, you will find an empty field for Hotspot Custom Icon Class.

5. Input the name of the class, which you used for that snippet, in this field. In case of the example I used, the class name is “custom-icon”.

6. Now, Publish the tour and embed it on a page/post. Then Preview the page/post to see that the hotspot icon has been replaced with the icon you selected.

(**Click here to learn how to embed a virtual tour on a page/post)

**These customizations are based on each hotspot. So if you want to customize a second hotspot, you need to select that hotspot and then use these customizations.

That’s it. That’s how you can customize hotspot icons and color.