15

ブートストラップと 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>

....

....

ここに私が取り組んでいることのフィドルがあります。

4

4 に答える 4

6

Web フォントの精神は、可能な限りキャッシュを使用することです。そのため、<head></head>自分でホストする代わりにCDN バージョンを使用する必要があります。

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

また、上記の行の後にCSSをロードしたことを確認してください。そうしないと、カスタム フォント CSS が機能しません。

参考：Font Awesome はじめよう

于 2013-08-12T03:29:40.657 に答える