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

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在玩。首先想到的是overflow:hidden;上的a。尝试使用以下代码：

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

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

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

在没有查看实际呈现的页面的情况下，我可以告诉他们......