在CSS屬性中設置圖標字體作爲背景

我想要做的就是用圖標字體而不是圖標圖像替換CSS中的背景圖像。我無法完成。這是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; ?>

我插入一個INCON字體<span class="icon">A</span>

來源

2012-12-13 Dani Bălă

我不認爲這是可能的，除了（可能）在Firefox中：[JS小提琴演示]（http://jsfiddle.net/davidThomas/WJVZ2/）。（但我不完全確定我理解你的問題或要求）。 –

我只是想調用一個圖標字體作爲css屬性的背景，有什麼辦法嗎？ –

你可以嘗試這樣的事：FIDDLE

比方說，你有你的DIV：在屬性

.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; 
}

：

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

你創建你的CSS樣式像這樣content你選擇你的「信」，然後你可以更改font-size,font-weight,color等...

來源

2012-12-13 22:49:36 Dim13i

請注意，這不適用於替換的內容，例如輸入，因爲它們不能包含任何子項（「

有在CSS內容屬性的方式：

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

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

來源

2012-12-13 22:34:14

使用導航文本，而不是背景img。

$(".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>'] 
});

併爲字體真棒圖標設置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-26 06:44:48

我想出了一些有趣的，imo：CSS element()函數。目前它是works only in firefox（所以請確保你在該瀏覽器的末尾鏈接了開放示例）。

這裏是HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet"> 

<div class="bg-patterns"> 
    <i class="material-icons" id="icon">pets</i> 
</div> 

<div class="with-icon-bg"> 
    Hi! I'm paragraph with background made from ordinary HTML element! And BTW - I'm a pets lover. 
</div>

...和CSS與評論：

.material-icons { 
    /* icon font */ 
    font-family: 'Material Icons'; 
    color: #ddd; 
} 

/* this is a wrapper for elements you want to use 
as backgrounds, should not be visible on page */ 
.bg-patterns { 
    margin-left: -90000cm; 
} 

.with-icon-bg { 
    /* all magic happens here */ 
    background: -moz-element(#icon); 


    /* other irrelevant styling */ 
    font-size: 25px; 
    width: 228px; 
    margin: 0 auto; 
    padding: 30px; 
    border: 3px dashed #ddd; 
    font-family: sans-serif; 
    color: #444; 
    text-align: center; 
}

最後 - 有一個working example（的jsfiddle）。

來源

2016-10-29 10:33:25

在CSS屬性中設置圖標字體作爲背景

回答

相關問題