Skip to content
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.

Bibliotecas de fontes utilizadas

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.

Exemplo

  • Para exibir um ícone de um envelope (mensagem): <i class="icon-mail></i>

Modificações no arquivo style.css

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;
}
Clone this wiki locally