Question

我想在任何具有属性rel =“external”的锚元素上显示“外部”图标。我最初使用的是图像，但这不适合使用字体大小，我想尽量减少我们使用的图像数量。

我们使用font-awesome作为整个网站的其他图标，通常包含带有.fa- *类的特定图标元素。但是对于外部链接，我想简单地使用CSS定位它们并使用：after伪选择器应用图标。

这是我到目前为止的CSS，这在iOS和Firefox中正确呈现，但在Chrome中它是一个或两个像素，并且锚点的下划线明显不对齐。我使用了CSS content值，前面有两个空格来包含图标。

a[rel="external"]:after {
  content: "\00a0\00a0\f08e";
  font-family: FontAwesome;
  font-size: 0.7em;
  line-height: 1;
}

这是一个显示行为的jsfiddle：http://jsfiddle.net/hcharge/b9L3o5c5/2/

有没有人知道如何在浏览器中一致显示？或者我被迫恢复使用图像？

编辑：我应该补充说，使用底部边框不是一个选项，因为它不允许足够的控制边界距离文本底部的距离。

Answer 1

在我发布这篇文章的时候，我有一点脑波，而且由于我还没有找到其他任何内容，我会在这里发布答案。

如果我们使用after元素在文本后添加一些额外的空格：

a[rel="external"]:after {
  content: '\00a0\00a0\00a0\00a0';
}

并将外部链接设置为相对位置，然后我可以设置图标显示为：before元素，并将其绝对定位在右侧。

a[rel="external"] {
  position: relative;
}

a[rel="external"]:before {
  content: "\f08e";
  font-family: FontAwesome;
  font-size: 0.7em;
  position: absolute;
  bottom: 2px;
  right: 0;
  text-decoration: none;
}

这是一个小提琴... http://jsfiddle.net/hcharge/b9L3o5c5

Answer 2

http://jsfiddle.net/b9L3o5c5/5/

html, body {

        font-family: FontAwesome;
        font-size: 19px;
    }

你必须为身体和图标使用相同的字体，它才有效。

Answer 3

我目前无法访问许多浏览器，但我希望这对您有用。

a {
    border-bottom: 1px solid;
    text-decoration: none;
}

a[rel="external"]:after {
  content: "\00a0\00a0\f08e";
  font-family: FontAwesome;
  font-size: 0.7em;
  line-height: 1;
  padding-left: 1px;
}

JSFiddle

编辑：在回复您的评论时，我唯一可以建议的是with a background image.这个想法取自here.

Answer 4

要获得正确的定位，您应该添加通常由“.fa”类提供的所有属性。 “.fa”正在做很多定位的东西。

如果您使用sass（或指南针/ burbon类型框架）之类的东西，您可以在'a [rel =“external”]中简单地'@include .fa'：在'规范之后。

在图标字体中显示一个图标，作为带有下划线的锚点中的伪元素

4 个答案: