无法设置数据图标对齐方式和填充

Question

我从Fontastic下载了一个符号，并用

<a href="#">SHOW MORE NEWS <span aria-hidden="true" data-icon="a"></span></a>

问题是符号是 18px x 20px。它在 <a> 元素中添加了不需要的空间，我无法添加填充或将其与文本对齐。

我该怎么做？

Answer 1

最简单的方法可能是将图标定位为绝对，这样它就会从流中移除，不再影响父a。像这样的东西应该可以解决问题：

[data-icon="a"] {
  position: absolute; 
  left: 100%;
  bottom: 0;
}
a {
  position: relative;
}

您可能想使用一些不同的选择器，但您明白了......

我设置了一个小提琴来演示：https://jsfiddle.net/1wsuc7ns/

更新：您评论说您只能看到符号的一部分。这有点奇怪，因为上面的代码不应该以任何方式影响符号的大小。也许这里还有其他一些 css 在起作用。首先想到的是a上的overflow:hidden;。尝试以下代码：

[data-icon="a"] {
  position: absolute; 
  right: 0;
  bottom: 0;
}
a {
  position: relative;
  padding-right: 20px;
}

所以我在 a 标签内为图标添加了一些额外的空间（您可能需要稍微玩一下数字）并更改了位置以将符号保留在a内。

另一个问题可能是有一些东西掩盖了符号。您可以尝试向符号添加合理的高z-index，看看是否可以解决它。

如果不看实际呈现的页面，我就知道不多了......