在CSS伪元素中居中自定义字形

Question

我定义了一个＆＃34; cross＆＃34;像svg文件中的符号

<glyph unicode="&#xe604;" d="M784.646 720.646c-30.038 30.038-79.328 30.038-109.367 0l-163.282-163.282-163.282 163.282c-30.038 30.038-79.328 30.038-109.367 0s-30.039-79.328 0-109.367l163.282-163.282-163.282-163.282c-30.039-30.038-30.039-79.328 0-109.367s79.328-30.038 109.367 0l163.282 163.282 163.282-163.282c30.038-30.038 79.328-30.038 109.366 0s30.038 79.328 0 109.367l-163.282 163.282 163.282 163.282c30.038 30.038 30.038 79.328 0 109.366z" />

我尝试将此图标放在css中的伪元素中，因为我有html

<span class="icon icon-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></span>

和css

.icon-close:before {
  content: '\e604';
  color: #474747;
}

但是元素中的十字架漂移了1个像素，具体取决于弹出窗口在屏幕上显示的位置（十字图标意味着弹出窗口上的关闭按钮）

向左漂移： 漂移到右边：（我给psuedo元素一个灰色的背景来说明更清楚）

您是否知道为什么会发生这种情况？我应该如何将图标贴到中心？

Answer 1

您是否考虑过仅使用伪元素进行此操作？

类似的东西：

div {
  position: relative;
  height: 100px;
  width: 300px;
  background: gray;
}
div:before,
div:after {
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  width: 20px;
  transition: all 0.4s;
}
div:before {
  content: "+";
  font-family: arial;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 8;
}
div:after {
  content: "";
  background: gray;
  box-shadow: inset 0 0 0 3px lightgray;
}
div:hover:after {
  box-shadow: inset 0 0 0 3px tomato;
}
div:hover:before {
  color: tomato;
}

<div></div>