8

星の評価を表示するためにjquery.raty.min.jsを使用しています.jsメソッドでは、表示開始画像を次のように変更するオプションがあります

starOff:"/images/star_none.png",

starOn:"/images/star_full.png"

しかし、ここで私はfont Awesomeクラスを使いたい

<i class="fa fa-star-o"></i>
<i class="fa fa-star"></i>

以下のようなクラスを配置してみました

starOff:"<i class='fa fa-star-o'></i>",

starOn:"<i class='fa fa-star'></i>"

しかし、誰もがこれを行うのを助けることができません。

4

5 に答える 5

3

プラグイン自体を少し変更しないと簡単な方法はないと思います。jquery.raty.jsファイルを見る場合は、次を検索します。

$('<img />', { src : icon, alt: i, title: title }).appendTo(this);

画像要素を作成し、

代わりにアイコンを作成する必要があります。次のようなものに変更すると思います：

$('<i />', { class : icon  }).appendTo(this);

しかし、使用法は次のようになります。

starOff:"fa fa-star-o",

starOn:"fa fa-star"

私はそれをテストしていませんが、それは何かを開始する必要があります。おそらく、CSS を使用してアイコンの外観を調整する必要があります。

于 2014-02-26T11:27:29.390 に答える
1

おそらく、既存の回答のポイントをキャッチできなかったかもしれませんが、raty 2.7.1 で fontawesome アイコンを使用することは難しくないことがわかりました。これが私のコードです。

html:

<div class="score-star" id="star-appearance" rel="score-appearance">
</div>

CSS:

.score-star {
    color: #07b062;
    font-size: 1.5em;
}

js:

$('.score-star').each(function () {
    $(this).raty({
        number: 5,
        starType: 'i',
        starOff: 'fa fa-star-o',
        starOn: 'fa fa-star'
    });
});

速度:

<link href="//cdn.bootcss.com/raty/2.7.1/jquery.raty.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/raty/2.7.1/jquery.raty.min.js"></script>

素晴らしいフォント:

<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

役に立てば幸いです。

于 2016-11-16T16:45:18.963 に答える
0

フォント サイズと色を確認してください。プロパティのフォント サイズと色を追加します。

于 2014-02-26T11:27:36.507 に答える