Font Awesome изображение не отображается для элемента списка - PullRequest
Новая
       5

Font Awesome изображение не отображается для элемента списка

0 голосов
/ 03 октября 2018

Я пытаюсь изменить изображение в стиле list на шрифт, отличный код содержимого f2bd;когда я использую это показывает только пустой квадрат.Появляется галочка, кружок и другие изображения, но не тот.

CSS 

li:before {
  content: "\f2bd"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  /*display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 5.3em; /* same as padding-left set on li */*
}

HTML 

    <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-19" tabindex="0" style="width: 252px; top: 96px; left: 13px; display: none;"><li class="ui-menu-item" id="ui-id-20" tabindex="-1"><i class="fas" fa-user-circle=""></i><a>Bob</a></li><li class="ui-menu-item" id="ui-id-21" tabindex="-1"><i class="fas" fa-user-circle=""></i><a>Cooler</a></li></ul>

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

Можете ли вы проверить этот образец: 

@import url('https://fonts.googleapis.com/css?family=Roboto');
@font-face {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style : normal;
  src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
  src : url("https://maxcdn.bootstrapcdn.com/font- 
awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
         url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
         url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
         url("https://maxcdn.bootstrapcdn.com/font- awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
         url("https://maxcdn.bootstrapcdn.com/font- awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") 
format("svg");
}

li:before {
  content: "\f2bd"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  /*display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 5.3em; /* same as padding-left set on li */*
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-19" tabindex="0" style="width: 252px; top: 96px; left: 13px; ">
  <li class="ui-menu-item" id="ui-id-20" tabindex="-1">
    <i class="fa fa-user-circle"></i>
    <a>Bob</a>
  </li>
  
  <li class="ui-menu-item" id="ui-id-21" tabindex="-1">
    <i class="fa fa-user-circle"></i>
    <a>Cooler</a>
  </li>
</ul>
0 голосов
/ 03 октября 2018

Тот же вопрос здесь 

@font-face {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style : normal;
  src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
  src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font- awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
     url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}
...