Home / Questions / 87138
Accepted
Dimoreno
Asked: 2020-07-15 14:36:46 +0800 CST 2020-07-15 14:36:46 +0800 CST

Icon over image using CSS and Material Design Icons

  • 772

I have the following code:

.stat {
  color: #4c4c4c !important;
  float: left !important;
  font-size: 10px !important;
  line-height: 17px !important;
  text-align: center !important;
  text-decoration: none !important;
  width: auto !important;
}

.stat:hover {
  color: #747474 !important
}

.stat strong {
  display: block !important;
  font-size: 22px !important;
  line-height: 25px !important
}
<div>
  <a href="#" class="stat">
    <strong>3333</strong> vic
  </a>
  <a href="#" class="stat">
    <strong>60</strong> 0986001661
  </a>
  <a href="#" class="stat">
    <strong>117</strong> [email protected]
  </a>
</div>

I would like to know how I can align an icon instead of the label strong. Something like this:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> vicsss
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> 98988888
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> [email protected]
  </a>
</div>

css

2 Answers

  1.    <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <i src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
  </div>

    the wrapper must have a relative position and the children or absolute icons

    • 1
  2. Best Answer

    It's simple, you just have to make the label ihave display:blockand the link text ais centered. Something quite similar to what you already had (I just added something else to make it a bit more flashy):

    a {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: #222;
}

a:hover {
  color: #666;
}

i.material-icons {
  display: block;
}
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> vicsss
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> 98988888
  </a>
  <a href="#" class="stat">
    <i class="material-icons">power_settings_new</i> [email protected]
  </a>
</div>

    • 1