Question

但是我正在尝试将list-style-image更改为真棒的内容代码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>

Answer 1

可以请您检查以下示例：

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

Answer 2

相同的问题here

Route::get('/logout' , 'Auth\LoginController@logout');

字体真棒图像未出现在列表元素中

2 个答案: