Simge yazı tipini CSS özelliğinde arka plan olarak ayarla

Question

Tüm yapmak istediğim simge görüntüsünü değil, simge yazı tipiyle CSS'deki arka plan görüntüsünü değiştirmek. Bunu yapamıyorum.

<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; ?> 

Bir izlemlerin yazı css bir içerik özelliği vardır <span class="icon">A</span>

Answer 1

Böyle bir şey deneyebilirsiniz: FIDDLE

Diyelim ki sizin DIV var diyelim:

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

böyle senin css stil oluşturmak:

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

özelliğinde content "mektup" u seçin ve daha sonra font-size, font-weight, color, vb ...

Answer 2

olduğunu eklemek yolu:

Bu PHP kod

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

geçerli: Bu CSS özelliktir

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

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

Answer 3

Arka plan yerine gezinti metnini kullanma 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>'] 
}); 

ve yazı müthiş simge için belirlenen css özelliği. , simge için normal css'dir.

.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

İlginç bir şeyle geldim, imo: CSS element() işlevi. Şu anda works only in firefox (bu nedenle, tarayıcıda sonunda bağlantılı bir örnek açtığınızdan emin olun). Bir working example (jsFiddle) bulunmaktadır -

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

Ve nihayet: yorumlarla

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

... ve CSS: Burada

HTML.