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