<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.block {
width:300px;
text-align:center;
margin-top:50px;
}
.block .image {
position:relative;
border-radius:50%;
margin:auto;
}
.block .content {
padding:20px 0;
font-size:24px;
}
/* colores de fondo */
.block.blue, .block.blue .image {
background-color:#7ac7c7;
}
.block.red, .block.red .image {
background-color:#c77a7a;
}
.block.green, .block.green .image {
background-color:#9fc77a;
}
/* tamaños */
.block.size16 .image {
top:-16px;
width:32px;
height:32px;
}
.block.size16 .image img {
padding: 8px;
}
.block.size24 .image {
top:-24px;
width:48px;
height:48px;
}
.block.size24 .image img {
padding: 16px;
}
.block.size32 .image {
top:-32px;
width:64px;
height:64px;
}
.block.size32 .image img {
padding: 24px;
}
</style>
</head>
<body>
<div class='block blue size16'>
<div class='image'><img src='ico_twitter.png'></div>
<div class='content'>
Texto
</div>
</div>
<div class='block green size24'>
<div class='image'><img src='ico_twitter.png'></div>
<div class='content'>
Texto
</div>
</div>
<div class='block red size32'>
<div class='image'><img src='ico_twitter.png'></div>
<div class='content'>
Texto
</div>
</div>
</body>
</html>
Comentarios sobre la versión: Versión 1 (1)