How to add custom icon to mobile icon toolbar

Here is snippet which can add additional icon to your mobile icon toolbar

You can add it in theme options – general – js code for footer

<script>
const rhtoolbar = document.getElementById("rhNavToolbar"); 
const rhtooladd = "<div class='rh-flex-center-align rh-flex-grow1 rh-flex-justify-center'><a href='https://site.com' class='rh-header-icon'><i class='rhicon rhi-video'></i></a></div>";   
rhtoolbar.insertAdjacentHTML('afterbegin', rhtooladd);
</script>

Let me explain this code.

First line is static line, it’s just select toolbar element. You should not change it

Last line will add custom element to toolbar, you should not change it

So, second line is your custom icon. We use special class rh-flex-center-align rh-flex-grow1 rh-flex-justify-center to center icon in toolbar. You need to change only next part of code

<a href='https://site.com' class='rh-header-icon'><i class='rhicon rhi-video'></i></a>

Here, change https://site.com to link which you need and rhi-video to class of icon which you want to use. Get it from Icon set For example, if you want to have gift icon, replace rhi-video by rhi-gift

If you need two icons, use

<script>
const rhtoolbar = document.getElementById("rhNavToolbar"); 
const rhtooladd = "<div class='rh-flex-center-align rh-flex-grow1 rh-flex-justify-center'><a href='https://site.com' class='rh-header-icon'><i class='rhicon rhi-video'></i></a></div><div class='rh-flex-center-align rh-flex-grow1 rh-flex-justify-center'><a href='https://site.com/second' class='rh-header-icon'><i class='rhicon rhi-gift'></i></a></div>";   
rhtoolbar.insertAdjacentHTML('afterbegin', rhtooladd);
</script>