用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 here。

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;
}`

要么

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

Click Here