Использование шрифта awesome на ванильном JavaScript

Я пытаюсь использовать значок 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
414
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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, жестко установленной в этом классе, и сохраните свой массив строк, а не объекты.

можно ли как-то импортировать его без тега script?

Gianmarco 14.06.2020 11:39

Другие вопросы по теме