Repositório Códigos HTML
11. Icon Boxes
Veja a seguir o código HTML comentado.
<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>
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.