Set icon font as background in CSS property
58,961
Solution 1
You could try something like this: FIDDLE
Let's say you have your DIV:
<div class="test"></div>
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;
}
in the property content
you choose your "letter" and then you can change the font-size
, font-weight
, color
, etc...
Solution 2
There is a content property in css:
.icon-rocket:after {
content: "{Symbol for rocket}";
}
http://www.w3schools.com/cssref/pr_gen_content.asp
Author by
Dani Bălă
Updated on November 02, 2020Comments
-
Dani Bălă over 3 years
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);}
This is the code in 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>
-
Turner Hayes over 9 yearsNote that this will not work for replaced content, such as inputs, because they cannot contain any children (except
<button>
)