[Resolved] How to make hyperlink icons

[Victor]

Dear GP Team,

I am using GP with Generateblocks. Generateblocks gives me the power to add svg icons. I was wondering how I can hyperlink those icons. Natively in Gutenberg, it does not seem to be an option. If you scroll down on the homepage I have linked to in the private info, you can see that I have tried to create a navigation to different categories using svg icons, and headings. I want to be able to link the icons to those category pages.

Also, unrelated, I wanted to ask if its a problem to make the headings of different sections H2s instead of div, which is what I see on the homepage of several websites. What is the meaningful difference and is there an disadvantage to making them h2s?

Thanks!

[David]

Hi there,

these is a question for the GenerateBlocks support forum.
But the simple answer is – use a Button to add the Icon you can remove the text and the padding. And you can add an Aria-Label to the icon so screen readers know what it is.

For the H2 to DIV – its HTML Semantics. If the Text element denotes a Heading and should be seen as such then you should add a H* tag. Ifs arbitrary text filler then it doesn’t really matter you can set it to a P or DIV. In the instance of just an icon then DIV may make sense.

[Victor]

Perfect. That solves it. Thank you so much, David. You are doing the God’s work (if you believe in God).

Cheers!

[David]

Glad to be of help!

[Author]

Posts