Html 在 CSS 属性中将图标字体设置为背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13869618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set icon font as background in CSS property
提问by Dani B?l?
All I want to do is replace a background image in CSS with an icon font, not icon image. I can't get it done. This is the CSS property:
我想要做的就是用图标字体而不是图标图像替换 CSS 中的背景图像。我无法完成。这是 CSS 属性：
.social-networks .twitter{background:url(../images/social/twitter.png);}
This is the code in PHP:
这是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; ?>
The way I insert an incon font is <span class="icon">A</span>
我插入 incon 字体的方式是 <span class="icon">A</span>
采纳答案by Dim13i
You could try something like this: FIDDLE
你可以尝试这样的事情：FIDDLE
Let's say you have your DIV:
假设你有你的 DIV：
<div class="test"></div>
you create your css style like this:
你像这样创建你的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;
}?
in the property contentyou choose your "letter" and then you can change the font-size, font-weight, color, etc...
在属性content您选择“信”，然后你可以改变的font-size，font-weight，color，等...
回答by E_p
There is a content property in css:
css中有一个内容属性：
.icon-rocket:after {
content: "{Symbol for rocket}";
}
回答by Shagun1390
use navigation text instead of background img.
使用导航文本而不是背景 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>']
});
and set css property for font awesome icon. here is normal css for icon.
并为字体真棒图标设置 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;
}
回答by Remek Ambroziak
I came up with something interesting, imo: the CSS element()function. Currently it works only in firefox(so make sure you are opening example linked at the end in that browser).
我想出了一些有趣的东西，imo：CSSelement()函数。目前它仅适用于 Firefox（因此请确保您在该浏览器的末尾打开示例链接）。
Here is HTML:
这是 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>
...and CSS with comments:
...和带有注释的 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;
}
And finally - there is a working example(jsFiddle).
最后 - 有一个工作示例（jsFiddle）。
