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

Question

我从 Fontastic 下载了一个符号，并将其添加到我的 html 中

<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，看看是否可以解决问题。

如果不查看实际呈现的页面，我只能说更多......