css - 使用 css 创建图标而不是使用图像

Question

我有这个图标，它用于运行 Bootstrap 3.7 的大型网站的菜单中。

图标：

我想看看我是否只能用 css 重新创建它。我想我已经接近了，但我希望红色箭头从上到下填充灰色方块。

ul>li>a::before {
  position: absolute;
  top: 5px;
  left: 0;
  display: inline-block;
  width: 9px;
  height: 10px;
  padding: 0 1px 0 0;
  font-family: 'Glyphicons Halflings';
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  line-height: 10px;
  color: #901a1e;
  content: "\e258";
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

谁能让它看起来更加相同？

JsFiddle 在这里。

标签： css

Answer 1

根据你的说法，你的前图标应该是红色的，它在灰色的正方形右边。

因此，要获得灰色方块，您必须将背景颜色设置为灰色，您可以在下面看到代码：

`ul>li>a::before {
  position: absolute;
  top: 5px;
  left: 0;
  display: inline-block;
  width: 9px;
  height: 10px;
  padding: 0 1px 0 0;
  font-family: 'Glyphicons Halflings';
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  line-height: 10px;
  color: #901a1e;
  content: "\e258";
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  Background-color:grey;
}`

或者

您也可以在下面的链接中看到

点击这里