Vẽ một đường gạch chéo trên biểu tượng glyphicon hoặc phông chữ tuyệt vời bằng cách sử dụng CSS

Question

Tôi muốn vẽ một đường gạch chéo trên biểu tượng hình tượng hoặc biểu tượng từ phông chữ tuyệt vời. Ví dụ, tôi muốn đặt dấu gạch chéo lên biểu tượng này như là "không có wifi có sẵn.

<i class="fa fa-signal"></i> 

Tôi cố gắng để làm điều đó với xếp chồng nhưng cho rằng tôi sẽ cần một biểu tượng một trong đó là một dấu gạch chéo.

<div class="fa-stack fa-lg"> 
    <i class="fa fa-signal fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i>     
</div> 
Wi-Fi 

có một cách dễ dàng hơn để có một dấu gạch chéo qua biểu tượng tín hiệu

Answer 1

Font tuyệt vời sử dụng: trước khi thẻ cho các biểu tượng, tại sao không sử dụng:. sau psuedo và .fa.fa-signal:after {content: "/"; color: red;} và định vị nó với css

.fa.fa-signal:after { 
 
    position: absolute; 
 
    content: "/"; 
 
    color: red; 
 
    font-weight: 700; 
 
    font-size: 1.7em; 
 
    left: 7px; 
 
    top: -10px; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<i class="fa fa-signal fa-2x"></i>

Answer 2

Một cách tiếp cận, mà tôi tin rằng kết thúc với một hình ảnh tốt hơn là sử dụng một hình chữ nhật xoay:

.fa.fa-signal:after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 3px; 
 
    height: 141.421356%; 
 
    top: -20.710678%; 
 
    display: block; 
 
    background: red; 
 
    left: 50%; 
 
    transform: translate(-50%, 0) rotate(45deg); 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<i class="fa fa-signal fa-2x"></i>

Giải thích một số số đó có thể trông kỳ diệu:

• width: 141.421356% - tính toán đường chéo của hình vuông mẹ (parent_square_size * square_root (2))
• top: -20.710678% - di chuyển đường đỏ một chút ở trên đầu để làm cho nó đúng vị trí khi quay, đây là một nửa chiều rộng vượt
• left: 50% và translate(-50%, 0) - để canh giữa nó

Answer 3

Tôi đề nghị sử dụng biểu tượng .fa-ban sẽ bao gồm biểu tượng wi-fi.
Vui lòng xem ví dụ.

#container { 
 
    position: relative 
 
} 
 

 
#nested { 
 
    position: absolute; 
 
    top: -8px; 
 
    left: -8px; 
 
    font-size: 200%; 
 
    color: rgba(217, 83, 79, 0.7); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<h4> 
 
    <i class="fa fa-rss" id="container"> 
 
    <i class="fa fa-ban" id="nested"></i> 
 
    </i> 
 
</h4>

Answer 4

Một thay đổi nhỏ về fa-ban ví dụ trên. Điều này sử dụng định vị em phân đoạn thay vì pixel. Bằng cách này, định vị hoạt động bất kể kích thước phông chữ hiện tại là gì. Điều này cũng sử dụng một lớp thay vì một id để nó có thể được sử dụng nhiều lần trên cùng một trang. Tôi cũng thay đổi dấu gạch chéo thành màu đỏ. Một popup công cụ-tip cũng được thêm vào bằng cách sử dụng thẻ tiêu đề.

.kc-fa-container { position:relative; } 
.kc-fa-nested { position: absolute; 
left: -0.125em; 
top: -0.125em; 
font-size: 1.5em; 
color: rgba(255, 0, 0, 0.7); 
} 
<i class="fa fa-rss kc-fa-contianer" title="No WiFi"> 
    <i class="fa fa-ban kc-fa-nested"></i> 
</i> 

Answer 5

Thêm phương pháp khác để đạt được hiệu ứng này, tôi thích sử dụng ống (|) với xếp chồng FontAwesome và xoay vì quy tắc kiểu đơn giản.

Mẹo: bạn có thể sử dụng phông chữ khác cho ống để có được các đầu tròn ... Bạn cũng có thể đạt được hiệu ứng tương tự mà không cần thẻ gói nhưng bạn phải thêm các quy tắc xếp chồng/định vị của riêng mình.

Screenshot of crossed-out icon

.crossed-out:after{ 
 
     content: '|'; 
 
     color: red; 
 
     display: block; 
 
     font-weight: bold; 
 
     text-align: center; 
 
     font-size: 2.5em; 
 
     -webkit-transform: rotate(-45deg); 
 
     -moz-transform: rotate(-45deg); 
 
     -o-transform: rotate(-45deg); 
 
     -ms-transform: rotate(-45deg); 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 

 
<span class="fa-stack crossed-out"> 
 
    <i class="fa fa-lg fa-stack-1x fa-signal"></i> 
 
</span>