Ustaw czcionkę ikony jako tło w własności CSS

Question

Wszystko, co chcę zrobić, to zastąpić obraz tła w CSS czcionką ikony, a nie obrazem ikony. Nie mogę tego zrobić. Jest to właściwość CSS:

.social-networks .twitter{background:url(../images/social/twitter.png);} 

Jest to kod w 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; ?> 

Sposób wstawić czcionka INCON jest <span class="icon">A</span>

Answer 1

Można spróbować czegoś takiego: FIDDLE

Powiedzmy masz Gr:

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

stworzyć swój styl css tak:

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

w nieruchomości content wybierasz swoją "literę", a następnie możesz zmienić font-size, font-weight, color, itp ...

Answer 2

Istnieje właściwość zawartość w css:

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

http://www.w3schools.com/cssref/pr_gen_content.asp

Answer 3

użyj tekstu nawigacji zamiast tła.

$(".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>'] 
}); 

i ustawić właściwość css dla ikony niesamowite czcionki. tutaj jest normalne css dla ikony.

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

Answer 4

Wpadłem na coś interesującego, imo: funkcja CSS element(). Obecnie jest to works only in firefox (dlatego upewnij się, że otwierasz przykład połączony na końcu w tej przeglądarce).

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

... i CSS z komentarzem:

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

I wreszcie - nie ma working example (jsFiddle).