Использование великолепного шрифта в Vanilla JavaScript - PullRequest
Новая
       38

Использование великолепного шрифта в Vanilla JavaScript

0 голосов
/ 21 июня 2019

Я пытаюсь использовать значок Font Awesome, чтобы отобразить следующую строку массива.Является ли это возможным?Нужна ли мне библиотека для этого?

Большое спасибо

Я попробовал это (внутри и снаружи "", которые все ломают мой код. 

e.innerHTML = '<i class="fas fa-venus" aria-hidden="true"></i>'
e.append('<i class="fas fa-mars" aria-hidden="true"></i>');

var quotesAm = [

/*I need the icons to appear before each of these words below*/

"Hemlaɣk.<br>Hemlaɣkem."

]


let uniqueRandomGenerator = n => {
  let set = new Set() // Use Set to remove any duplicates as keep adding #
  while (set.size < n) set.add(Math.floor(Math.random() * n)) // Keep adding #
  return Array.from(set) 
}

let randomQuotes = uniqueRandomGenerator(quotesAm.length), last = 0

function newQuoteAm() {
  document.getElementById('amQuoteDisplay').innerHTML = quotesAm[randomQuotes[last]];
  last = last == randomQuotes.length - 1 ? 0 : last + 1
}

<h1 class="tamazight-tifinaghe">Amaziɣ Daily</h1><br>


    <div id="amQuoteDisplay">
        <!--Amaziɣ quotes display here-->
    </div>

        <div align="left">
    <button onclick="newQuoteAm()">Next</button>
    </div>

</div>
</div>

    <script src="testAm.js"></script>

    <script src="https://kit.fontawesome.com/3cb9f76276.js"></script>

1 Ответ

0 голосов
/ 22 июня 2019

Вы можете сделать свой массив кавычек массивом объектов со значком, указанным для каждого элемента: 

var quotesAm = [
{ label: 'a', icon: 'fa-venus' },
{ label: 'b', icon: 'fa-mars' },
{ label: 'c', icon: 'fa-box' },
{ label: 'd', icon: 'fa-bath' },
{ label: 'e', icon: 'fa-bolt' },
{ label: 'f', icon: 'fa-at' },
]

let uniqueRandomGenerator = n => {
  let set = new Set() // Use Set to remove any duplicates as keep adding #
  while (set.size < n) set.add(Math.floor(Math.random() * n)) // Keep adding #
  return Array.from(set)
}

let randomQuotes = uniqueRandomGenerator(quotesAm.length), last = 0

function newQuoteAm() {
  let quote = quotesAm[randomQuotes[last]]
  document.getElementById('amQuoteDisplay').innerHTML = `<span><i class="fas ${quote.icon}" aria-hidden="true"></i> ${quote.label}</span>`
  last = last == randomQuotes.length - 1 ? 0 : last + 1
}
<h1 class="tamazight-tifinaghe">Amaziɣ Daily</h1><br>

<div id="amQuoteDisplay">
  <!--Amaziɣ quotes display here-->
</div>

<div align="left">
  <button onclick="newQuoteAm()">Next</button>
</div>

<script src="https://kit.fontawesome.com/3cb9f76276.js"></script>

Если вы хотите иметь только одну иконку, используйте тот же подход только для функции newQuoteAm, которую устанавливает класс, и сохраняйте массив строк не объектами.

...