Set icon font as background in CSS property

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')): ?>
            <a href="<?php echo my_option('twitter_link'); ?>"  class="twitter">twitter</a>
    <?php endif; ?>

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


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

There is a content property in css:

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

use navigation text instead of background img.

    navigation : true,
    slideSpeed : 500,
    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.

.owl-prev {
   font-size: 30px;
.owl-next {
    font-size: 30px;

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).

Here is HTML:

<link href=""

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

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

...and CSS with comments:

.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).

Need Your Help

Avoid public folder of laravel and open directly the root in web server

php .htaccess laravel webserver laravel-4

I was going through all possible sample on internet to solve this. Still it is an headache.