在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属性中设置图标字体作为背景

回答

相关问题