Question

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

我的网站上正在运行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>

Answer 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>

使用FontAwesome图标替换png作为源

1 个答案: