Как отобразить значок в теге выбора параметров - PullRequest
Новая
       13

Как отобразить значок в теге выбора параметров

0 голосов
/ 02 января 2019

Нужно отобразить Font Awesome в теге select options?

Если я использую вне его работы <i class="fas fa-chart-pie"></i> Но как я могу отобразить его в теге, если текст 

<select id="select_graphtype">
  <option value="line_graph"> Line Graph</option>
  <option value="pie_chart"> Pie Chart</option>
</select>

Не могли бы вы мне помочь?

Ответы [ 3 ]

0 голосов
/ 02 января 2019

Вы не можете использовать (значок тега) внутри (параметр тега), но вы можете сделать это по-другому, как использовать class = 'fa' в select и классы иконок в значении параметра. Это полностью работает в моем случае. 

<select id="select_graphtype" class="fa">
    <option value="fa fa-address-card"> &#xf2bb; line chart</option>
    <option value="fa fa-address-card"> &#xf2bb; Pie Chart</option>
</select>

Если это не работает, убедитесь, что 

.fa option {

    font-weight: 900;
}

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

Image worked for me

0 голосов
/ 02 января 2019

Попробуйте: 

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
         url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
    font-family: FontAwesome;
}
<select id="select_graphtype">
    <option value="line_graph"> &#xf2bb; Line Graph</option>
    <option value="pie_chart"> &#xf2bb; Pie Chart</option>
</select>
0 голосов
/ 02 января 2019

Вы можете просто добавить значок FontAwesome в выпадающий список в виде текста.Вам нужно всего лишь несколько вещей в CSS, FontAwesome CSS и Unicode.Например, : 

 select {
 font-family: 'FontAwesome', 'Second Font name'
 }



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
  <option>Hi, &#xf042;</option>
  <option>Hi, &#xf043;</option>
  <option>Hi, &#xf044;</option>
  <option>Hi, &#xf045;</option>
  <option>Hi, &#xf046;</option>
</select>

, который вы спросите, дублируется с this .

...