Repositório Códigos HTML

11. Icon Boxes

 

First Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More
 

Second Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More
 

Third Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More
 

Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More

Veja a seguir o código HTML comentado.

Código

<div class="row-fluid">
<div class="iconbox span3">
<div class="iconcircle"><i class="fa fa-twitter"> </i></div>
<div class="iconbox-content">
<h4>Título</h4>
<p>Texto</p>
<a class="btn btn-default" href="#">Read More</a></div>
</div>
<div class="iconbox span3">
<div class="iconcircle"><i class="fa fa-sliders"> </i></div>
<div class="iconbox-content">
<h4>Título</h4>
<p>texto.</p>
<a class="btn btn-default" href="#">Read More</a></div>
</div>
<div class="iconbox span3">
<div class="iconcircle"><i class="fa fa-flag"> </i></div>
<div class="iconbox-content">
<h4>título</h4>
<p>texto.</p>
<a class="btn btn-default" href="#">Read More</a></div>
</div>
<div class="iconbox span3">
<div class="iconcircle"><i class="fa fa-book"> </i></div>
<div class="iconbox-content">
<h4>título</h4>
<p>texto.</p>
<a class="btn btn-default" href="#">Read More</a></div>
</div>
</div>
<p></p>

Comentário

O trecho em azul clarinho refere-se à moldura redonda dos ícones.

O trecho em amarelo claro refere-se aos ícones, e pode ser substituído pelo código do ícone de sua preferência. Importante manter relação do ícone com o título da caixa.

Os trechos em salmão são relativos aos títulos e texto  explicativo a ser inserido abaixo da imagem. O código <h4> antes e depois do título refere-se ao nível de cabeçalho (tamanho e formatação).

O trecho em azul é o link para onde o "Read more!" irá levar. Se quiser que o link vá para um arquivo em específico, suba o arquivo em uma pasta do ambiente, clique com o botão direito sobre o arquivo e copie o endereço do link. Você também pode colocar o link para uma outra página.