LOCAWEB STYLE

Documentação Locaweb Style

Ícones

Inserção de ícones em elementos

O Bootstrap já tem um esquema de inserção de ícones em elementos. No Locaweb Style modificamos esse funcionamento para que não fosse necessário adicionar uma tag a mais no HTML.

Nós também temos a necessidade de ter várias cores para os serviços. Por isso utilizamos o serviço Fontello para utilizarmos icones baseados em fonts. O ponto importante é possibilitar o uso dos nossos ícones e usar os ícones do Bootstrap. Há um prefixo nas classes: icon- para os ícones do Bootstrap e ico- para os ícones da Locaweb.

Funcionamento

Para adicionar seu ícone, insira uma das classes da nossa coleção de ícones no elemento escolhido. Os ícones não são os mesmos do Bootstrap. Embora você possa usar os ícones do Bootstrap, recomendamos que você use os nossos ícones, por que eles são baseados em fonts.

Colocando ícones na direita

Por padrão os ícones ficam do lado esquerdo. Para posicionar os ícones do lado direito, basta colocar a classe icoPosRight. Um exemplo: ico-plus

Ícones em boxes

Temos ícones específicos que são utilizadas nos shortcutBox.

<div class="shortcutBox microBox">
	<div>
		<a href="#" tabindex="3" title="Crie uma nova caixa postal dentro do seu site.">
			<h3 class="chamaicon-pincel"><span class="shortcutTitle">Criar caixa postal</span> </h3>
			<p>Crie uma nova caixa postal dentro do seu site.</p>
		</a>
	</div>
	<div>
		<a href="#" tabindex="3" title="Envie mensagens para várias caixas em um único endereço.">
			<h3 class="chamaicon-sendemail"><span class="shortcutTitle">Criar grupo</span></h3>
			<p>Envie mensagens para várias caixas em um único endereço.</p>
		</a>
	</div>
	<div>
		<a href="#" tabindex="3" title="Compartilhe contatos na agenda de todas as caixas postais.">
			<h3 class="chamaicon-sendowindow"><span class="shortcutTitle">Adicionar contato</span></h3>
			<p>Compartilhe contatos na agenda de todas as caixas postais.</p>
		</a>
	</div>
</div>