Código html não interpretado corretamente

Front-end
,
#1

Dei um pesquisada e não encontrei algo semelhante, talvez por não saber o termo exato para identificar a situação.

Estou utilizando o mesmo trecho em duas partes do código, porém em uma ele interpreta como código e na outra como texto simples.

Segue imagem do resultado exibido no navegador.

naointerpreta

Segue os códigos que aparecem ao inspecionar a tag que não é interpretada e da que é, respectivamente.

Live <i style=“color: red;” class=“far fa-dot-circle”></i>

Live

Teria alguma forma de forçar essa interpretação pelo navegador?

Desde já, obrigado.

#2

Isso vai te ajudar identificar o problema e onde precisa corrigir

https://validator.w3.org/

#3

Posta o código completo, está muito genérico isso.

#4 
<ol>
	<li> 
		<a href="#curso">
    		<span id="crumb_1">
    			<span>01 - AMBIENTE </span>
    	        <span>TESTE20191</span>
			</span>
		</a>
		<div>
			<span>
				<a href="#conteudoMenu" title="Navegação curso a curso">
					<img src="/images/generic.gif" alt="Navegação curso a curso">
				</a>
	    	</span>
		</div>
	</li>
   	<li class="placeholder">
		<span>
			Live &lt;i style="color: red;" class="far fa-dot-circle"&gt;&lt;/i&gt;
		</span>
	</li>
</ol>