我正在使用 bootstrap 和 Font Awesome。在我正在处理的自定义 css 类中，我尝试包含 Font Awesome 图标而不是使用图像。这是我在 Font Awesome 之前的代码。
.data .close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../img/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.next {
right: 0;
float: right;
}
.next:hover {
background: url(../img/next.png) right 48% no-repeat;
}
这是我使用 Font Awesome 的代码，这显然不起作用。图标不显示。知道我做错了什么吗？
.data .close {
display: block;
float: right;
width: 30px;
height: 30px;
font-family: FontAwesome
content: "\f00d";
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
}
.next {
right: 0;
float: right;
}
.next:hover {
font-family: FontAwesome
content: "\f054";
}
html 标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>
....
....
最佳答案
您可以使用 :before 或 :after 伪代码来做到这一点。在这里阅读更多信息 http://astronautweb.co/snippet/font-awesome/
将你的代码改成这样
.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
text-decoration: none;
}
.lb-prev:before {
font-family: FontAwesome;
content: "\f053";
font-size: 30px;
}
对其他图标做同样的事情。您可能还想调整图标的颜色和高度。无论如何这是fiddle希望这有帮助
关于css - 如何在自己的 CSS 中使用很棒的字体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18179098/