Is there a way to avoid META while editing Fontawesome icon as links?

[GalinhaLX]

Hi,

What's the best way to edit the href attribute when using Font Awesome icons like

<i class="fa-brands fa-instagram"></i>

which is inside a link <a> element

I saw mavo's demo here, but i would like to know if there's a way to use it in a much more simple way just adding

[DmitrySharabin]

Could you, please, give me a bit more context so that I can understand the problem you are trying to solve?

[GalinhaLX]

Hi

I've made this codepen

[GalinhaLX]

Ok, so I figure it out:

@LeaVerou 's workaround to avoid a element click just works on ...a elements

When using @DmitrySharabin workaround, I can use a specific class, and apply it to icon (great)

New codepen, here (see solution 2)

Unfortunately, I don't know javascript enought:

Would you recommend to adapt @LeaVerou workaround to have ability to add other elements, or classes?
Or is @DmitrySharabin workaround doing all good already?

By the way, I'm looking to have the editing effect just like in this demo, BUT using <i> elements from FontAwesome

[DmitrySharabin]

Do you mean a mv-default value? Or a value in the inner html?

Sorry for my poor explanation and let me fix it. :) If an <a> element is a property, its value is stored (by default) in the href attribute. So, the <a> property has a value if: 1) it has the href attribute and 2) the value of this attribute is not an empty string.

For example, if we have <a property="link" href="https://mavo.io/">Foo</a>, the link property has the value of https://mavo.io/.

In the following two cases, the foo and bar properties have no values (and the user won't see the Foo and Bar text in read mode):

1. <a property="foo">Foo</a> (no href attribute)
2. <a property="bar" href="">Bar</a> (the value of href is an empty string).

And btw, mv-default would work too.

In your codepen, does the <i></i> element counts as a value for the parent element where you set the property?

Absolutely. Anything between <a> and </a> is the content of the <a> element.

[DmitrySharabin]

it doesn't work my side (both Firefox, chrome) -> Opens popup, then follows the link next second

You're right! I would suggest using this code snippet as a workaround (I modified Lea's workaround, so it reflects our case):

document.addEventListener("click", (evt) => {
	if (evt.target.closest('[mv-mode="edit"] a')) {
		evt.preventDefault();
	}
});

I already fixed my pen.

[GalinhaLX]

Hi @DmitrySharabin

Thank you so much for these explanations !

About your code:

• It perfectly works under Chrome & Firefox (edit , and follows link)
• On Safari: edit mode (OK), but in 'read' mode doesn't work to follow the link :(

[DmitrySharabin]

It's because of the way CodePen works (using frames) and some Safari restrictions.

If you open the pen in Debug mode, it'll work.

[GalinhaLX]

oh, thanks for information !

and congratulations for the new code :) safe to use it so ;)