时间戳

首页 > 解决方案 > 在 Vanilla JavaScript 上使用很棒的字体

javascript - 在 Vanilla 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>

标签： javascriptarraysfont-awesome

解决方案

您可以将引号数组设为对象数组，并为每个元素指定图标：

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该类设置的函数中使用相同的方法，并保留您的字符串数组而不是对象。

推荐阅读