如何使用字体真棒在自己的CSS？ | 如何使用字体真棒在自己的CSS

本文介绍了如何使用字体真棒在自己的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。请在此阅读更多信息 
 
 
 将您的代码更改为此
  .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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！