PowerApps Portal: How to replace "Home" menu with a home icon instead on the portal home page navigation

[Anonymous]

Hello Community,

I have a custom PowerApps portal. On the default portal home page, does anyone know how I could replace the "Home" menu with a home icon instead on the portal home page navigation? For example, instead of the out of the box "Home" menu that comes with the default home page, how can I replace that with a home graphic icon that when clicked on would take users to the home page?

Please see screen shot attached.

Any insights would be appreciated. Thank you!

[chleverenz]

Hi @Anonymous ,

if i got it right, you just have to edit the so called "primary navigation" weblinkset. In the links you will find the "home" reference where you can edit the text, style, behavior and image to your needs.

Watch out: you have to find the right weblinkset with your language and your portal (website) you are working on.

Hope it helps,

  Christian

[Anonymous]

Hi @chleverenz ,

Thank you for your reply. Would you mind giving me additional pointers as to how I could replace the default "Home" menu link with a home image icon? I went to the web link, via the web link sets, as you have suggested. Attached screen shot is all the default selections and values that I see. I haven't changed anything. I am not clear on where the setting is that would allow me to replace the defauly "Home" text menu link with a home icon graphic.

I could see on many PowerApps portal related blogs where the portal home menu is showing the home icon (such as the screen shot in my previous message above), and not using the default Home text menu in th navigation. And I am not sure how to do that.

Any further insights would be appreciated. Thank you!

[OOlashyn]

Hi @Anonymous ,

If you are using Starter template you need to change the Home link in Default Web Link Set. If you want to show an icon instead of the image you need to provide the correct class list and also make sure that the icons library is present on the page. By default, we have Bootstrap icons (you can find more about them here) included. 

For example, I want to add the Home icon (glyphicon glyphicon-home). In the image URL, I need to provide a full class list - .glyphicon .glyphicon-home (with dots and spaces). Also, I need to provide at least a width of the icon (in pixels).

You can see weblink setting and result in attached screenshots. Don't forget to clear cache after you set everything up.

[Anonymous]

Hi @OOlashyn ,

Thank you for the information! I have followed exactly the steps you have provided, cleared the portal cache by going to "_services/about" on the portal URL, but the changes I have done are still not taking effects. I am still seeing the default "Home", instead of the home icon from glyphicon glyphicon-home.

It's a custom portal I have creasted in the PowerApps Portal app.

Please see my attached screen shots. Do you see anything that I could be missing or doing wrong?

Thank you!

[OOlashyn · Accepted solution]

@Anonymous  I noticed that on the screenshot your Home button has a dropdown triangle which means that you have set on the Home weblink to Display Page Child Links. But in the screenshot that you add I can see that this option is unchecked. Please check what Web Link Set is used for your Navigation and also make sure that you updated Web Link Set for correct portal language.

[chleverenz]

Hi together,

just looks in one of my portals and found ".fa.fa-home" as the image url which is funny as i always thought, it's the glyphicons due to bootstrap 3.

Sidenode: the "Primary Navigation" weblinkset is rendered via the "header" template when you haven't changed the headertemplate for your site. This template in standard looks for the image url and if it starts with a dot, it is treated as css-classes. If it starts with something completely diffrent ( a slash or an h for https 🙂 for example), it is used as an url.

As the liquid uses split "." | join i think (but not sure, haven't tried) that you should not have spaces between your (css) classes. But this is just a guess, give it a try without spaces in between.

May be this helps,

  Christian

PS always clear the cache after changes or use frontside editing 🙂