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

Question

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