-
Notifications
You must be signed in to change notification settings - Fork 4
Icones
Andrei Bosco edited this page Jul 31, 2013
·
8 revisions
Os ícones utilizados pelo sistema são carregados através de uma fonte especial gerada pela ferramenta IcoMoon App. O IcoMoon gera um arquivo de referência indicando o nome da classe que deve ser utilizada para exibir o ícone.
A maioria dos ícones adotados são da família Entypo, com exceção dos ícones de checkmark que são da família IcoMoon Free e alguns ícones que foram desenhados pela nossa equipe e importados para a ferramenta IcoMoon App.
O arquivo da sessão de trabalho do IcoMoon App está disponível no Box.net caso seja necessário fazer alterações.
- Para exibir um ícone de um envelope (mensagem):
<i class="icon-mail></i>
Nós realizamos as seguintes alterações no arquivo style.css gerado pelo IcoMoon App:
- renomear para icons.css
- mover a seção de font-face para o arquivo fonts.css
- adicionar o seguinte trecho no início do arquivo, ANTES da listagem de classes de icones:
.nodecoration {
text-decoration: none !important;
}
.empty {
opacity: 0.3;
filter: alpha(opacity=30);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
[class^="icon-"],
[class*=" icon-"] {
width: 18px;
height: 18px;
color: #828282;
}
[class^="icon-"].warning,
[class*=" icon-"].warning {
color: red;
}
- adicionar o seguinte código DENTRO da listagem de classes de ícones, no final:
font-size: 18px;
vertical-align: middle;
- adicionar o seguinte código APÓS a listagem de classes de ícones:
.big {
font-size: 32px;
line-height: 34px;
}