How to block translation into an HTML element/tag

Question

<div id="title-div">
    <h3 id="title">C<i class="fas fa-virus"></i>vid-19 in&nbsp</h3><h3 id="in-country">loading...</h3>
</div>

I need the H3 tag with id "title" not translated, because the fontawesome icon changes position when the page is translated and does not give the desired effect (at least that’s what happened when I tested)

Have some way to do this in HTML itself or if necessary, in JS? (BLOCK TRANSLATIONS IN A PARTICULAR ELEMENT)

Answer 1

You can add, to the tag that contains the text not to be translated, the attribute translate in the tag or if the translation tool is Google Translate, use a class worthwhile notranslate.

Just in case, test with both:

<div id="title-div">
    <h3 id="title" class="notranslate" translate="no">C<i class="fas fa-virus"></i>vid-19 in&nbsp</h3><h3 id="in-country">loading...</h3>
</div>

_{Obs: I’m not sure it works on all browsers...}