Как загрузить все шрифты-удивительный значок в раскрывающемся списке - PullRequest
Новая
       12

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

0 голосов
/ 22 апреля 2020

Я хочу добавить все иконки font-awesome в dropdown. Есть ли способ прочитать все иконки в font-awesome.css и связать их с раскрывающимся списком управления.

Как, например,. Используя любой пример регулярного выражения или любым другим способом, прочитайте все иконки class и свяжите их в элементе управления select.

В настоящее время я должен добавить stati c, как показано в примере ниже. Есть ли способ прочитать Dynami c all класс. 

$(document).ready(function() {
    var iconArray = new Array(
      "fa-arrow-circle-down",
      "fa-user",
      "fa-plus",
      "fa-minus"
    );
    for(var i=0;i<iconArray.length;i++)
    {
      $(".jsIcon").append("<option>"+iconArray[i]+"<option>");
    }
});
<!DOCTYPE html>
<html>
<head>
   <title>font-awesome</title>   
   <!-- FONT AWESOME ICONS -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<i class="fa fa-arrow-circle-down"></i> Font Awesome
</div>
<div>
<i class="fa fa-user"></i> Font Awesome User iCon
</div>
<div>
<i class="fa fa-plus"></i> Font Awesome User iCon
</div>
<div>
<i class="fa fa-minus"></i> Font Awesome User iCon
</div>
<div>
<select class="jsIcon">
</select>
</div>
</body>
</html>

Заранее спасибо.

1 Ответ

1 голос
/ 22 апреля 2020

Теоретически вы можете использовать фрагмент кода ниже. Он заблокирован политикой CORS браузера, поскольку имеет ссылку на CDN. Для локального CSS файла он должен нормально работать. 

$(document).ready(function() {
  const sheet = document.styleSheets[0]; // font-awsome one
  let iconArray = Array.from(sheet.cssRules)
    .filter(r => r.type === CSSRule.STYLE_RULE &&
      r.selectorText.indexOf("fa-") > -1 &&
      r.selectorText.indexOf("::before") > -1)
    .map(r => {
      return {
        selector: r.selectorText.replace("::before", ""),
        style: r.style.content[1]
      }
    });
  for (let i = 0; i < iconArray.length; i++) {
    $("select").append(`<option value="${iconArray[i].selector}">${iconArray[i].style} ${iconArray[i].selector}`);
  }
});
select {
  font-family: 'Font Awesome', 'sans-serif';
}
<!DOCTYPE html>
<html>

<head>
  <title>font-awesome</title>
  <!-- FONT AWESOME ICONS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body>
  <div>
    <i class="fa fa-arrow-circle-down"></i> Font Awesome
  </div>
  <div>
    <i class="fa fa-user"></i> Font Awesome User iCon
  </div>
  <div>
    <i class="fa fa-plus"></i> Font Awesome User iCon
  </div>
  <div>
    <i class="fa fa-minus"></i> Font Awesome User iCon
  </div>
  <div>
    <select class="jsIcon">
    </select>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>
...