如何使用字体真棒在自己的CSS？ [英] how to use font awesome in own css?
问题描述
我使用bootstrap和字体awesome。在自定义css类中，我正在努力，我试图包括字体真棒图标，而不是使用图像。这是我的代码之前的字体真棒。
.data .close {
display：block;
float：right;
width：30px;
height：30px;
background：url（../ img / close.png）右上角no-repeat;
text-align：right;
outline：none;
filter：progid：DXImageTransform.Microsoft.Alpha（Opacity = 70）;
opacity：0.7;
}
.next {
right：0;
float：right;
}
。下一页：hover {
background：url（../ img / next.png）right 48％no-repeat;
}
这里是我的代码使用字体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;
}
。下一页：hover {
font-family：FontAwesome
content：\f054;
}
html标题
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title> test< / title>
< link rel =stylesheethref =./ font-awesome / css / font-awesome.css>
< / head>
....
....
<您可以使用
：之前或：之后 pseudo。请在此阅读更多信息 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;
}
对其他图标执行相同操作。您可能需要调整图标的颜色和高度。反正这里是小提琴希望这有助于
I'm using bootstrap and font awesome. in a custom css class i'm working on i tried to include font awesome icons instead of using images. Here is my code before 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;
}
here is my code using font awesome, which obviously doesn't work. The icons don't show. Any idea what i'm doing wrong?
.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 header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
</head>
....
....
here is a fiddle of what i'm working on.
解决方案 you can do so by using the :before or :after pseudo. read more about it here http://astronautweb.co/snippet/font-awesome/
change your code to this
.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;
}
do the same for the other icons. you might want to adjust the color and height of the icons too. anyway here is the fiddle hope this helps
这篇关于如何使用字体真棒在自己的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
