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

使用 CSS 和 Material Design 图标覆盖图像的图标

  • 772

我有以下代码：

.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>

我想知道如何对齐 icon 而不是 label strong。像这样的东西：

<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>

    包装器必须具有相对位置，并且子图标或绝对图标

    • 1
  2. Best Answer

    很简单，你只需要让标签i有display:block并且链接文本a居中。与您已经拥有的非常相似的东西（我只是添加了其他东西以使其更加华丽）：

    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