21

私がやりたいのは、CSS の背景画像をアイコン画像ではなくアイコン フォントに置き換えることだけです。私はそれを成し遂げることができません。これは CSS プロパティです。

.social-networks .twitter{background:url(../images/social/twitter.png);}

これは PHP のコードです。

<ul class="social-networks">
    <?php if (my_option('twitter_link')): ?>
        <li>
            <a href="<?php echo my_option('twitter_link'); ?>"  class="twitter">twitter</a>
        </li>
    <?php endif; ?>

インコンフォントを挿入する方法は<span class="icon">A</span>

4

4 に答える 4

22

次のようなものを試すことができます: FIDDLE

DIV があるとします。

<div class="test"></div>

次のように CSS スタイルを作成します。

.test {
    width: 100px;
    height: 100px;
    border: 2px solid lightblue;
}

.test:before {
    content: "H";
    width: 100%;
    height: 100%;
    font-size: 5.0em;
    text-align: center;
    display: block;
    line-height: 100px;
}​

プロパティでcontent「文字」を選択すると、、、、などを変更font-sizeできfont-weightますcolor...

于 2012-12-13T22:49:36.353 に答える
5

CSS には content プロパティがあります。

.icon-rocket:after {
   content: "{Symbol for rocket}";
}

http://www.w3schools.com/cssref/pr_gen_content.asp

于 2012-12-13T22:34:14.380 に答える
0

背景画像の代わりにナビゲーション テキストを使用します。

$(".slider").owlCarousel({
    navigation : true,
    slideSpeed : 500,
    singleItem:true,
    navigationText:['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>']
});

font awesome アイコンの css プロパティを設定します。ここにアイコンの通常のcssがあります。

.owl-button{
   position:relative;
}
.owl-prev {
   position:absolute;
   top:0;
   left:47%;
   font-size: 30px;
}
.owl-next {
    position:absolute;
    top:0;
    right:47%;
    font-size: 30px;
}
于 2016-10-26T06:44:48.960 に答える