我使用 jQuery 向元素添加了文本，但字体不匹配

Question

我在带有jQuery的元素中添加了文本，但字体不匹配。

我使用了：

jQuery(document).ready(function(){
jQuery("i.fas.fa-search").text(" SEARCH");

如何仅针对文本来更改字体家庭？

Answer 1

肯定的东西！

i元素仅包含图标；它可以包含其他文本，但会导致我的经验并发症。要添加与图标相邻的文本，我建议将文本附加到图标的容器元素上。因此，如果您有：

<button id="button"><i class="fas fa-search"></i></button>

您将使用：

 $("#button").append("<span>Search</span>");

这将在按钮元素中的搜索图标之后添加一个跨度元素。如果您想完成一些简单的事情，例如悬停的揭示，您甚至可以将跨度放在那里开始并使用CSS属性揭示它，以防止必须按编程进行添加和删除它，但是如果您将其添加和删除，如果您可以使用JS工作。只想添加一次。

Answer 2

尝试此代码。

在您的CSS中创建类：

.prjct-font{
  font-family: 'your-font';
}

在jQuery中：

jQuery(document).ready(function(){
  jQuery("i.fas.fa-search").html('<span class="prjct-font"> SEARCH</span>');
});

由于字体令人震惊，您可以更改i Tag字体