सीएसएस प्रॉपर्टी में पृष्ठभूमि के रूप में आइकन आइकन सेट करें

Question

मैं बस इतना करना चाहता हूं कि सीएसएस में एक पृष्ठभूमि छवि को आइकन आइकन के साथ प्रतिस्थापित करें, आइकन छवि नहीं। मैं इसे नहीं कर सकता।

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

तरह से मैं सम्मिलित एक इनकॉन फ़ॉन्ट <span class="icon">A</span>

Answer 1

आप कुछ इस तरह की कोशिश कर सकते: FIDDLE

मान लें कि अपने DIV करते हैं: संपत्ति में

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

:

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

आप इस तरह अपने सीएसएस शैली बनाने content आप अपना "अक्षर" चुनते हैं और फिर आप font-size, font-weight,बदल सकते हैं, आदि ...

Answer 2

है सीएसएस में एक सामग्री संपत्ति नहीं है:

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

यह PHP में कोड है: यह सीएसएस संपत्ति है

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

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

Answer 3

पृष्ठभूमि आईएमजी के बजाय नेविगेशन टेक्स्ट का उपयोग करें।

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

और फ़ॉन्ट भयानक आइकन के लिए सीएसएस संपत्ति सेट करें। यहां आइकन के लिए सामान्य सीएसएस है।

.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

मैं कुछ दिलचस्प के साथ आया था, imo: सीएसएस element() कार्य करते हैं। वर्तमान में यह works only in firefox (इसलिए सुनिश्चित करें कि आप उस ब्राउज़र में अंत में जुड़े उदाहरण को खोल रहे हैं)। वहाँ एक working example (jsFiddle) है -

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

और अंत में:

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

... और सीएसएस टिप्पणी के साथ:

यहाँ एचटीएमएल है।