No software vectorial, exportar os icons em cor preta (RGB: 0/0/0) no formato SVG.
Abrir o site ico https://icomoon.io/app/.
Criar um novo Set e importar os icons em SVG.
Seleccionar os icons pretendidos e fazer o download da pasta com a icon font, renomear e colocar na pasta do site no servidor.
No Custom CSS, colocar o seguinte código, para chamar as fonts. Atenção que o caminho do URL deve ser o correcto até chegar à pasta onde estão os icons.
Podemos alterar o nome ‘icomoon’ da familia de fonts para outro que vamos usar no font-family, no neste caso alterei para: “familia-fonts-mm”;
@font-face {
font-family: 'familia-icons-mm';
src: url('https://tesp.esadcr.pt/mmwebdev/icons-mm/fonts/icomoon.eot?9qg292');
src: url('https://tesp.esadcr.pt/mmwebdev/icons-mm/fonts/icomoon.eot?9qg292#iefix') format('embedded-opentype'),
url('https://tesp.esadcr.pt/mmwebdev/icons-mm/fonts/icomoon.ttf?9qg292') format('truetype'),
url('https://tesp.esadcr.pt/mmwebdev/icons-mm/fonts/icomoon.woff?9qg292') format('woff'),
url('https://tesp.esadcr.pt/mmwebdev/icons-mm/fonts/icomoon.svg?9qg292#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}CSS
.icon-simples {
font-family: 'familia-icons-mm';
display: block;
color: #888888 !important;
font-size: 26px;
}
.icon-simples:before {
content: '\e900';
}
.icon-simples:hover {
color: #ff0090 !important;
}<div class="icon-simples"></div>Resultado:
CSS para um icon como botão
.icon-caixa {
font-family: 'familia-icons-mm';
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
color: #000 !important;
background-color: #eabf00;
border: solid 2px #000000;
margin: 0;
border-radius: 30px 30px 0 30px;
font-size: 26px;
transition: all .5s ease;
}
.icon-caixa:before {
content: '\e900';
}
.icon-caixa:hover {
color: #000000 !important;
background-color: #ffffff;
}CSS para link no texto com icon
.icon-texto a {
display: block;
color: #555;
transition: all .5s ease;
}
.icon-texto a:before {
font-family: 'familia-icons-mm';
content: '\e900';
font-size: 13px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
top: 0px;
width: 30px;
height: 30px;
color: #eabf00;
background-color: black;
border-radius: 50px;
margin-right: 10px;
transition: all .3s ease;
}
.icon-texto a:hover {
color: #000000 !important;
}
.icon-texto a:hover:before {
color: #000000;
background-color: #eabf00;
}<div class="icon-texto">
<a href="https://tesp.esadcr.pt/mmwebdev/">
Aqui o texto do link
</a>
</div>Resultado:
Se link no Text Editor, colocar no CSS na TAB Advanced, e quando um texto é um link, o CSS é aplicado
icon-textoResultado:
CSS para link no texto com icon dentro de uma caixa.
.icon-texto-caixa a {
display: block;
text-align: center;
padding: 10px 15px;
color: #555;
background-color: #a5cec7;
border: solid 2px #000;
border-radius: 0;
transition: all .5s ease;
}
.icon-texto-caixa a:before {
font-family: 'familia-icons-mm';
content: '\e900';
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
color: #eabf00;
background-color: black;
border-radius: 50px;
margin: 5px auto;
transition: all .3s ease;
}
.icon-texto-caixa a:hover {
color: #ffffff !important;
background-color: #000;
border-color: #eabf00;
}
.texto-icon-caixa:hover:before {
color: #000000;
background-color: #eabf00;
}<div class="icon-texto-caixa">
<a href="https://tesp.esadcr.pt/mmwebdev/">
Aqui o texto do link
</a>
</div>Resultado:
Se link no Text Editor, colocar no CSS na TAB Advanced, e quando um texto é um link, o CSS é aplicado
icon-texto-caixaResultado:
No CSS o display pode ser usado como flex ou table-cell, para ajustar automáticamente aos limites do texto.
Mas se no Text Editor, na TAB Advanced, colocarmos o WIDTH como INLINE o resultado será o mesmo.
Resultado:
Aqui temos icons com o mesmo comportamento e imagens diferentes.
.icon-geral a {
display: inline;
color: #444;
transition: all .5s ease;
}
.icon-geral a:before {
font-family: 'familia-icons-mm';
width: 40px;
height: 40px;
color: #fff !important;
background-color: #000;
border-radius: 50%;
font-size: 17px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px 0 0px;
position: relative;
top: 0px;
transition: all .3s ease;
}
.icon-geral a:hover {
color: #a502bf !important;
}
.icon-geral a:hover:before {
background-color: #a502bf;
color: #fff !important;
}
.icon-camera a:before {
content: '\e900';
}
.icon-comedia a:before {
content: '\e901';
}
.icon-coracao a:before {
content: '\e902';
}
.icon-fantasma a:before {
content: '\e903';
}
.icon-ovni a:before {
content: '\e904';
}
.icon-seta a:before {
content: '\e905';
}
.icon-seta-2 a:before {
content: '\e906';
}<div class="icon-geral icon-camera">
<a href="https://tesp.esadcr.pt/mmwebdev/">
Aqui o texto do link
</a>
</div>Resultado:
<div class="icon-geral icon-comedia">
<a href="https://tesp.esadcr.pt/mmwebdev/">
Aqui o texto do link
</a>
</div>Resultado:
Se link no Text Editor, colocar no CSS na TAB Advanced, e quando um texto é um link, o CSS é aplicado
icon-geral icon-cameraResultado:
Aqui podemos ver todos os icons com o mesmo comportamento e apenas os icons mudam
Resultado: