使用 FontAwesome 图标替换 png 作为源答案

【问题标题】：Using FontAwesome icon to replace png as a source使用 FontAwesome 图标替换 png 作为源
【发布时间】：2020-04-29 00:24:41
【问题描述】：

我想知道是否有人可以帮助我！

我在我的网站上运行了 SiteSearch360，并且我正在使用通过单击放大镜图像触发的全屏搜索栏。

我想用我自己的 Font Awesome 图标更新默认图像 (src="https://cdn.sitesearch360.com/ss360-search-icon.png") 以匹配网站上使用的其他图像。

当我用我的字体真棒代码<i class="fas fa-search"></i>替换源代码时，图标出现损坏且不可点击，但是当图标未在 SiteSearch360 配置中使用时，它显示得非常好。我已经尝试了大约 100 种代码变体，非常感谢任何帮助以使其正常工作。

非常感谢

site-nav.hbs

<nav class="site-nav">
<div class="site-nav-left-wrapper">
    <div class="site-nav-left">
        {{#if @site.logo}}
            <a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
        {{else}}
            <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
        {{/if}}
        <div class="site-nav-content">
            <div class="mobileShow">???? Scroll</div> 
            {{#if @site.navigation}}{{navigation}}
            {{/if}}
            {{#is "post"}}
                <span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
            {{/is}}
        </div>
    </div>
</div>

<div class="site-nav-right">
    <img id="ss360-search-trigger" src="https://cdn.sitesearch360.com/ss360-search-icon.png" style="cursor:pointer;position: relative;top:4px;" data-pagespeed-url-hash="3037143943" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"/>&nbsp;&nbsp;
    {{#if @site.secondary_navigation}}
        {{navigation type="secondary"}}
    {{else}}

default.hbs（SiteSearch360 脚本）


<!-- Beginning of SS360 scripts -->

<script>var ss360Config={siteId:"www.monstermtn.com",showResultLink:true,showErrors:true,layout:{navigation:{position:"top"},mobile:{showUrl:true},desktop:{showUrl:true}},suggestions:{show:false},style:{themeColor:"#00843c",defaultCss:true,themeColor:'#313648'},searchBox:{placeholder:"lorem ipsum",selector:"#query"},results:{fullScreenConfig:{trigger:"#ss360-search-trigger",caption:"LOREM IPSUM"},caption:"Search results for your query #QUERY#",moreResultsPagingSize:5},tracking:{enhanced:false}};</script>
<script src="https://cdn.sitesearch360.com/v13/sitesearch360-v13.min.js" async></script>

    {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
    {{ghost_foot}}

</body>
</html>

【问题讨论】：

标签： html css svg font-awesome ghost-blog

【解决方案1】：

你的图标使用有没有：

确保 FontAwesome 被引用/导入？
适当地设置了图标的样式？

确保使用正确的属性，如下所示：

<i id="ss360-search-trigger" class="fas fa-search" style="cursor:pointer" data-pagespeed-url-hash="3037143943" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></i>

【讨论】：