Fontawesome не может загрузить значок по номеру ссылки в css - PullRequest
Новая
       26

Fontawesome не может загрузить значок по номеру ссылки в css

0 голосов
/ 03 мая 2019

Это похоже на вопрос «значок выглядит как квадрат», однако мой работает при использовании «fa fa-child» и т. Д., Но не при использовании идентификатора ссылки на изображение.

В моем макете у меня есть: 

 <link href="~/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="/css/my-css.min.css" rel="stylesheet" id="theme">

CSS: 

.my-button {
    background: linear-gradient(45deg,#585858,#8C8C8C)
}

.my-button-blue:before {
    content: "\f500";
    font-family: FontAwesome;
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
}

Только использование "\ f500" в моем css разбивает его (он просто показывает квадрат), однако использование его в коде, как показано ниже, работает нормально: 

<i class="fas fa-smile fa-2x text-white"></i>

Я также попытался @import "../ vendor / fontawesome-free / css / all.min.css"; в моем css

Я стараюсь использовать его как часть моего фонового изображения, чтобы оно «обрезалось» при достижении края - вроде водяного знака.

Fiddle:

https://jsfiddle.net/as8L924e/2/

Хотя это не показывает иконки ...

Ответы [ 3 ]

1 голос
/ 03 мая 2019 
   <environment include="Development"> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     </environment>

Use :font-family:
         .my-button-blue:before {
            content: "\f500";
            font-family: "Font Awesome 5 Free";
            position: absolute;
            color: white;
            top: 50%;
            left: 50%;
    font-weight: 900;
            font-size: 20px;
0 голосов
/ 03 мая 2019

С помощью консоли разработчика современного браузера вы можете проверить, какие свойства CSS применяются к значку с помощью класса. Вы можете использовать эти свойства CSS для определения собственных классов и использовать их по своему усмотрению.

Вот образец для этого. 

.my-button-blue:before {
  content: "\f500";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  color: blue;
  top: 50%;
  left: 50%;
  font-weight: 900;
  font-size: 2em;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

Ниже приведен фрагмент рабочего кода для справки. 

.my-button-blue:before {
  content: "\f500";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  color: blue;
  top: 50%;
  left: 50%;
  font-weight: 900;
  font-size: 2em;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<i class="fas fa-smile fa-2x text-white"></i>

<i class="my-button my-button-blue"></i>

Удачного кодирования. :)

0 голосов
/ 03 мая 2019

Я не уверен, без codepen или чего-то еще, но я думаю, что проблема может быть с font-family, потому что в all.min.css ff установлен как .fas{font-family:"Font Awesome 5 Free"}.Поэтому вы можете попробовать изменить семейство шрифтов на это значение и в своем коде.

Если вы проверите, что находится внутри файла all.min.css, вы увидите, что font-face определен как 

@font-face{
    font-family:"Font Awesome 5 Free";
    font-style:normal;
    font-weight:900;
    font-display:auto;
    src:url(../webfonts/fa-solid-900.eot);
    src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
        url(../webfonts/fa-solid-900.woff2) format("woff2"),
        url(../webfonts/fa-solid-900.woff) format("woff"),
        url(../webfonts/fa-solid-900.ttf) format("truetype"),
        url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

Имейте в виду, что если вы установите более новую версию fa для вашего поставщика, ваш код может сломаться.

...