web-dev-qa-db-ja.com

CSSを使用してグリフィコンまたはフォント素晴らしいアイコンの上にスラッシュ線を描画します

グリフアイコンまたはfont-awesomeのアイコンの上にスラッシュ線を引きたいのですが。たとえば、このアイコンに「Wi-Fiが利用できません」というスラッシュを付けたいとします。

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

スタッキングでやってみましたが、そのためにはスラッシュのアイコンが1つ必要です。

<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

信号アイコンにスラッシュを付ける簡単な方法はありますか？

cssfont-awesomeglyphicons
15
feradz

Font awesomeはアイコンに：beforeタグを使用します。なぜ：after psuedoと.fa.fa-signal:after {content: "/"; color: red;}を使用し、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>
20
Aaron

Wi-fiアイコンを覆う.fa-banアイコンを使用することをお勧めします。
例をご覧ください。

#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>
15
Shimon S

この効果を実現するためにさらに別のメソッドを追加します。スタイルルールがシンプルであるため、FontAwesomeのスタックと回転でパイプ（|）を使用するのが好きです。

ヒント：パイプに別のフォントを使用して、端を丸くするなどの方法があります。ラッピングタグなしでも同じ効果を得ることができますが、独自のスタッキング/配置ルールを追加する必要があります。

取り消し線の付いたアイコンのスクリーンショット

.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>
8
mmarlow

もう少し良いビジュアルになると私が思う別のアプローチは、回転された長方形を使うことです：

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

魔法のように見えるかもしれないいくつかの数を説明する：

  • _width: 141.421356%_-親正方形の対角線を計算します（parent_square_size * square_root（2））
  • _top: -20.710678%_-回転したときに赤い線を上部より少し上に移動して正しい位置に配置します。これは超過幅の半分です。
  • _left: 50%_およびtranslate(-50%, 0)-中央揃えにします
8
Luizgrs

現在、これはFontAwesomeによってネイティブにサポートされています。この機能は「スタックアイコン」と呼ばれます。 こちら を参照してください。

コード：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<span class="fa-stack fa-2x">
  <i class="fas fa-signal fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>
4
davidthegrey

上記のfa-banの例を少し変更しました。これは、ピクセルの代わりに分数のem配置を使用します。このようにして、現在のフォントサイズに関係なく配置が機能します。また、IDの代わりにクラスを使用するため、同じページで複数回使用できます。また、スラッシュを真っ赤に変更しました。タイトルタグを使用したツールチップポップアップも追加されました。

.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>
0
Dan

Font-awesomeスラッシュアイコン（FAバージョン5.4.0以降）を使用して解決しました

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<span class="fa-stack fa-2x">
  <i class="fas fa-signal fa-stack-1x"></i>
  <i class="fas fa-slash fa-stack-1x" style="text-shadow: 0.1em 0.15em white;"></i>
</span>
0
judian