0

Como alterar a fonte de "Regular Icons" para "Solid Icons" via CSS. No https://fontawesome.com/cheatsheet as duas possuem o mesmo código.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a#edit{
    color: #f00;
    text-decoration: none;
    background-color: none;
}
a#edit:link::before{
   font-family: FontAwesome;
   content:"\f1c6 ";
   }
a#edit:hover{
    color: #000;
    text-decoration: none;
    background-color: none;
}

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph. 
</p><p> <a id="edit" href="#"> </a>
</p><p> <a href="#">.</a>
</p><p> <i class="fas fa-file-archive"> f1c6 </i>
</p><p> <i class="far fa-file-archive"> f1c6 </i>
</p>

</body>
</html>

5
  • Então, no caso seria ideal você trabalhar com a fonte direto, sem a utilização das classes do font-awesome, você pode utilizar o a popriedade content no css, e especificar a fonte como a font-awesome. Lá na visualização do detalhe do ícone que você selecionou, tem um código do ícone específico, a documentação da versão 5 está ótima, vale a pena dar uma olhada! Commented 1/02/2018 às 14:21
  • O que voce indica, já fiz, e está no codigo da pergunta. Os dois códigos são iguais. como altero a apresentação? Preciso de ajuda nivel Hard. :D
    – britodfbr
    Commented 1/02/2018 às 14:31
  • Coloquei as duas representações para ficar mais claro.
    – britodfbr
    Commented 1/02/2018 às 14:40
  • Cara com ::before é impossível pelo que eu andei lendo... Quando vc tenta trocar o de font-family: "Font Awesome 5 Regular"; para font-family: "Font Awesome 5 Solid"; ele não carrega a fonte fica só um quadrado... Se vc reparar no Dev Tools o ícone já é um ::before e não tem como ter um ::before::before A solução seria usando o <i> Se mesmo se quiser eu te respondo com mais detalhes no campo de Resposta
    – hugocsl
    Commented 1/02/2018 às 17:28
  • Olá @hugocsl se possível gostaria da resposta sim.
    – britodfbr
    Commented 6/02/2018 às 11:55

1 Resposta 1

1

Segue uma alternativa sem usar ::before pois o novo padrão da https://fontawesome.com/ já coloca o ícone como um ::before e não tem como vc fazer um ::before::before

Aqui está a documentação oficial sobre o uso do ::before no novo padão: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements

Agora vamos ao que interessa, Para fazer o que vc quer basta seguir a estrutura do HTML e colocar no <i> a classe branco ou preto para mostrar e esconder os ícones no :hover dando o efeito que acredito que vc quer.

Veja no Snippet abaixo que vc vai entender melhor.

.icone {
    position: relative;
    cursor: pointer;
}
.branco{
    position: relative;
    color: red;
}
.preto {
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
}
.icone:hover .preto {
    color: black;
}
.icone:hover .branco {
    color: transparent;
}
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">


<span class="icone">
    <i class="far fa-file-archive branco"></i>
    <i class="fas fa-file-archive preto" ></i> 
    f1c6 
</span>
<br><br>
<span class="icone">
    <i class="far fa-address-book branco"></i>
    <i class="fas fa-address-book preto" ></i> 
    f2b9 
</span>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .