Đặt phông chữ biểu tượng làm nền trong thuộc tính CSS

Question

Tất cả những gì tôi muốn làm là thay thế hình nền trong CSS bằng phông chữ biểu tượng, không phải hình ảnh biểu tượng. Tôi không thể hoàn thành công việc. Đây là thuộc tính CSS:

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

Đây là mã trong 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; ?> 

Con đường tôi chèn một phông chữ incon là <span class="icon">A</span>

Answer 1

Bạn có thể thử một cái gì đó như thế này: FIDDLE

Hãy nói rằng bạn có DIV của bạn:

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

bạn tạo phong cách css của bạn như thế này:

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

trong bất động sản content bạn chọn "chữ" của mình và sau đó bạn có thể thay đổi font-size, font-weight, color, v.v ...

Answer 2

Có một tài sản nội dung trong css:

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

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

Answer 3

sử dụng văn bản điều hướng thay vì img nền.

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

và đặt thuộc tính css cho phông chữ biểu tượng tuyệt vời. đây là biểu tượng css bình thường cho biểu tượng.

.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

Tôi đã đưa ra một điều thú vị, imo: chức năng CSS element(). Hiện tại nó là works only in firefox (vì vậy hãy đảm bảo bạn đang mở ví dụ được liên kết ở cuối trình duyệt đó).

Đây là 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> 

... và CSS với ý kiến:

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

Và cuối cùng - có một working example (jsFiddle).