[Resolved] Add link icon next to H2/H3/H4 headers

[Rick]

Hi there,

I’m wondering if there’s an easy way to add an icon link before each H2, H3 and H4 in my posts.

When hovering or clicking the link it should show the HTML-anchor so people can copy it. A bit like on these pages:

https://rankmath.com/kb/rich-snippets/

Curious to hear 🙂

Regards,
Rick

[David]

Hi there,

there is this plugin:

https://wordpress.org/plugins/add-anchor-links/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rick]

Thanks David, will look at the plugin.

I was hoping a simple CSS trick belongs to the possibilities. Should I instead just use a plugin to make things easier? 🙂

Rick

[David]

CSS can only do so many things, we could show the anchor link icon but the copy on click thats not possible. So the Plugin is the best way to go.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rick]

I understand, I feel I’m learning more about CSS every day! Thank you David, highly appreciated.

[David]

Simple rule:
HTML is what outputs the content to the page.
CSS is what adds style to that content.

CSS cannot add HTML. So we need some other code, either:

PHP which is a server side language that could be used to filter the headings HTML and insert the necessary links.
Javascript which is a language that runs in the users browser and that can crawl that page, create the links and inject them into the HTML.

I would expect that plugin uses PHP, Javascript and CSS to do it 🙂

Glad to be of helo.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts