HTML Como cria algo semelhante as class para substituir palavras

[Carlos Alexandre 399]

marquei na imagem de vermelho a palavra (paw) que seria pata tem alguma forma deu criar algo tipo aquelas classes a cima que aumenta fonte e muda a cor de todas de uma vez, ao invés de muda de uma por uma

tipo queria saber se existe maneira de cria algo tipo <i class="pata fa-li fa fa-paw fa-spin"></i> ai subistuiar a palavra paw por exemplo por home <i class="pata fa-li fa fa-home fa-spin"></i> ai substituiria de todas ao mesmo ao invés de muda a palavra paw manualmente uma por vez  

 

                        Exemplo:

<i class="pata fa-li fa fa-paw fa-spin">

                             

                             

                             

<i class="pata fa-li fa fa-paw fa-spin">

<i class="pata fa-li fa fa-paw fa-spin">

<i class="pata fa-li fa fa-paw fa-spin">

<i class="pata fa-li fa fa-paw fa-spin">

<i class="pata fa-li fa fa-paw fa-spin">

 

Ai quando substituir a palavra paw por home. 

                                   

<i class="pata fa-li fa fa-home fa-spin">

 

Iria muda de muda a palavra home de todas.                                   

                                 

                                   

<i class="pata fa-li fa fa-home fa-spin">

<i class="pata fa-li fa fa-home fa-spin">

<i class="pata fa-li fa fa-home fa-spin">

<i class="pata fa-li fa fa-home fa-spin">

<i class="pata fa-li fa fa-home fa-spin">

 

 

O script da imagem 

https://jsfiddle.net/f1twn608/ 

 

 

[DiF]

@Carlos Alexandre 399 Você pode criar a regra simples...

.fa-home{

   regras css aqui

}

Mas se você está se referindo em criar um novo ícone, aí nesse caso você vai ter que usar as icon-fonts.

Daí incorporar ao seu CSS

Se você tiver as imagens que você quer criar ícones, use este site: https://icomoon.io/  para criar as icon-fonts personalizadas.