在CSS属性中将图标字体设置为背景 [英] Set icon font as background in CSS property

问题描述

所有我想做的是将CSS中的背景图片替换为图标字体，而不是图标图片。
我不能做到。
这是CSS属性：

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:

.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 = > A< / span>

The way I insert an incon font is <span class="icon">A</span>

推荐答案

FIDDLE

You could try something like this: FIDDLE

让我们说你有你的DIV：

Let's say you have your DIV:

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

您可以这样创建css样式：

you create your css style like this:

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

c>您选择您的信，然后您可以更改 font-size ， font-weight ， color ，etc ...

in the property content you choose your "letter" and then you can change the font-size, font-weight, color, etc...

这篇关于在CSS属性中将图标字体设置为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！