Icono sobre imagen usando CSS y Material Design Icons

publicado por: Anonymous

Tengo el siguiente código:

_x000D_

_x000D_

.stat {_x000D_
  color: #4c4c4c !important;_x000D_
  float: left !important;_x000D_
  font-size: 10px !important;_x000D_
  line-height: 17px !important;_x000D_
  text-align: center !important;_x000D_
  text-decoration: none !important;_x000D_
  width: auto !important;_x000D_
}_x000D_
_x000D_
.stat:hover {_x000D_
  color: #747474 !important_x000D_
}_x000D_
_x000D_
.stat strong {_x000D_
  display: block !important;_x000D_
  font-size: 22px !important;_x000D_
  line-height: 25px !important_x000D_
}

_x000D_

<div>_x000D_
  <a href="#" class="stat">_x000D_
    <strong>3333</strong> vic_x000D_
  </a>_x000D_
  <a href="#" class="stat">_x000D_
    <strong>60</strong> 0986001661_x000D_
  </a>_x000D_
  <a href="#" class="stat">_x000D_
    <strong>117</strong> [email protected]_x000D_
  </a>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Quisiera saber cómo puedo alinear un icono en vez de la etiqueta strong. Algo como esto:

_x000D_

_x000D_

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">_x000D_
_x000D_
<div>_x000D_
  <a href="#" class="stat">_x000D_
    <i class="material-icons">power_settings_new</i> vicsss_x000D_
  </a>_x000D_
  <a href="#" class="stat">_x000D_
    <i class="material-icons">power_settings_new</i> 98988888_x000D_
  </a>_x000D_
  <a href="#" class="stat">_x000D_
    <i class="material-icons">power_settings_new</i> [email protected]_x000D_
  </a>_x000D_
</div>

_x000D_

_x000D_

_x000D_

solución

Es sencillo, tan sólo tienes que hacer que la etiqueta i tenga display:block y que el texto del enlace a esté centrado. Algo bastante parecido a lo que ya tenías (sólo he añadido algo más para que sea algo más vistoso):

_x000D_

_x000D_

a {_x000D_
  text-align: center;_x000D_
  display: inline-block;_x000D_
  text-decoration: none;_x000D_
  color: #222;_x000D_
}_x000D_
_x000D_
a:hover {_x000D_
  color: #666;_x000D_
}_x000D_
_x000D_
i.material-icons {_x000D_
  display: block;_x000D_
}

_x000D_

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">_x000D_
_x000D_
<div>_x000D_
  <a href="#" class="stat">_x000D_
    <i class="material-icons">power_settings_new</i> vicsss_x000D_
  </a>_x000D_
  <a href="#" class="stat">_x000D_
    <i class="material-icons">power_settings_new</i> 98988888_x000D_
  </a>_x000D_
  <a href="#" class="stat">_x000D_
    <i class="material-icons">power_settings_new</i> [email protected]_x000D_
  </a>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *