Question

我想通过CSS的content属性添加一个图标。我刚刚复制了第一个答案中写的代码，用于电话图标：
Use font awesome icon as css content

但我没有看到任何电话图标。相反，我看到一个空方块 - 为什么会这样？这是我使用的完整代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>

<a href="#">This is a link</a>

</body>
</html>

format.css：

body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #515151;
}

a:before {
   font-family: FontAwesome;
   content: "\f095";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
}

Answer 1

内容标记实际上是对webfont文件的引用，.woff。出现空方块，因为无法解析引用。

您应该确保在此处找到的css和woff资源 - http://fontawesome.io/get-started/ - 作为参考添加。

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>

<a href="#">This is a link</a>

</body>
</html>

Answer 2

确保您已在页面see here on how to do that中导入/包含FontAwesome。

＆＃13;

body {
  font-family: Arial;
  font-size: 13px;
}
get-started-download a {
  text-decoration: none;
  color: #515151;
}
a:before {
  font-family: FontAwesome;
  content: "\f095";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<a href="#">This is a link</a>

＆＃13;

Answer 3

只需在头标记中添加下面给出的链接，其余代码就可以了。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

您的图标将会出现。

错误使用CSS内容属性？

3 个答案: