Нарисуйте линию слэш поверх глификона или шрифта - удивительный значок с помощью CSS

Я хотел бы нарисовать черту с чертой над символом глифа или значком от шрифта-awesome. Например, я хочу поместить черту над этим значком, поскольку "нет доступных wifi.

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

Я попытался сделать это с помощью стекирования, но для этого мне понадобится один значок, который является косой чертой.

<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

Есть ли более простой способ иметь косую черту над значком сигнала?

Ответ 1

Шрифт awesome использует: перед тегом для значков, почему бы не использовать: после 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>

Ответ 2

Я предлагаю использовать значок .fa-ban, который будет охватывать значок Wi-Fi.
См. Пример.

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

Ответ 3

Добавляя еще один метод для достижения этого эффекта, мне нравится использовать pipe (|) с укладкой и вращением 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>

Ответ 4

Другим подходом, который, как мне кажется, заканчивается лучшим визуальным, является использование поворотного прямоугольника:

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

Ответ 5

Теперь это поддерживается изначально Font Awesome. Эта функция называется "набор иконок". Смотрите здесь.

Код:

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

Ответ 6

Небольшая модификация примера fa-ban выше. Это использует дробное размещение em вместо пикселей. Таким образом, позиционирование работает независимо от текущего размера шрифта. Это также использует класс вместо id, чтобы его можно было использовать несколько раз на одной странице. Я также изменил косую черту, чтобы она была красной. Всплывающее окно с подсказкой также добавлено с помощью тега title.

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

Ответ 7

Я решил это, используя шрифт-потрясающий значок косой черты (FA Version 5.4. 0+)

<link rel="stylesheet" href="#" onclick="location.href='https://use.fontawesome.com/releases/v5.5.0/css/all.css'; return false;" 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>