Utilizing FontAwesome icons instead of png images as a visual source

Is there anyone who can assist me?

I currently have SiteSearch360 set up on my website with a full screen search bar that is activated by clicking on an image of a magnifying glass.

My goal is to replace the default image 

(src="https://cdn.sitesearch360.com/ss360-search-icon.png")
with my own Font Awesome icon to maintain consistency with the other icons used on the site.

However, when I substitute the source with my Font Awesome code 

<i class="fas fa-search"></i>
, the icon appears broken and does not respond to clicks. Strangely, if the icon is not included in the SiteSearch360 configuration, it displays correctly. I've experimented with numerous variations of the code, but have not been successful in getting it to work. Any assistance would be greatly appreciated.

Thank you in advance

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 script)


<!-- 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>
htmlcsssvgfont-awesomeghost-blog

Answer â„–1

Have you checked your icon usage?

  1. Confirmed that FontAwesome is properly referenced / imported?
  2. Ensured that the icon is styled appropriately?
  3. Checked if the correct attributes are used, for example: 
    <i id="ss360-search-trigger" class="fas fa-search" style="cursor:pointer" data-pagespeed-url-hash="3037143943" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></i>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

Send an identifier to the following page upon selecting a hyperlink in AngularJS

I am currently working on a project that involves displaying a list of places and allowing users to click on a place to view more details on another page. I would like some guidance on how to implement this feature. Here is the HTML code for Page1: <l ...

javascripthtmlangularjs

Is it possible for search engines like google to index Javascript content that is stored within divs and loaded onto the page?

My website utilizes JavaScript to dynamically add content to div elements, like so: <script> //This content is generated by PHP var contents = [ "Item 1", "Item 2" ]; //Display the first item document.getElementById( "item" ).textCo ...

javascripthtmldynamicseogoogle-search

Error message: "Maximum width header anomaly"

I've been working on a full-width header tumblr theme and everything looks great until I resize the screen to a smaller size, like on a mobile or tablet. The header ends up cutting off and no longer maintains its full width. You can see an example of ...

htmlcsstumblr-themes

The images are not clickable when trying to hyperlink them

I'm attempting to create a clickable image that will redirect users to another site when clicked. Here's the code I've tried: <div class="haus"> <a href="http://google.com"><img src="http://schwedenladen.de/wp-content/the ...

htmlcssimagehyperlink

Managing the ajax response to showcase a button within datatables

Here is my current datatable structure: <table id="list" class="display" width="100%" > <thead> <tr> <th>Title</th> <th>Description</th> <th>delete</th> ...

javascripthtmlajaxdatatable

The <select> list appears wider on Windows compared to Mac

Is there a way to achieve consistent width for a wide select list on different operating systems and browsers? I've noticed that the width of the select box varies between Windows and Mac OS when viewed in Chrome or other browsers. For example, if yo ...

htmlcsswindowsmacosgoogle-chrome

Adding style tags dynamically to a component and then encapsulating the styles again (using Angular)

Currently, I am in the process of upgrading from AngularJS to Angular. Our app is currently a hybrid one being bundled up with webpack instead of just angular cli. Due to this setup, we have encountered issues where our css or scss files are not correctly ...

javascriptcssangularangular-templateangular2viewencapsulation

How to dynamically change the position of an input field within a form using JavaScript and jQuery

I have a form displayed on my website that looks like this: input a input b input c I am wondering if it is achievable to rearrange the order of inputs using jQuery, like so: input a input c input b However, it is important that the data is still ...

javascriptjqueryhtmlforms

creating a customized grid layout with Bootstrap 5

Is it possible to create a layout similar to the one shown in this image using Bootstrap 5? In addition, I would like to include an image inside every third item. How can I accomplish this with the Bootstrap grid system? ...

htmlcssbootstrap-4bootstrap-5

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Tips for transferring an element from different components to a designated component in React.js

In my project, I have a <Header> component and another component called <AboutMe>. My goal is to select an element by its ID from the <AboutMe> component and attach an event listener for onClick. However, whenever I attempt to use getEl ...

javascripthtmlreactjs

Implement a dynamic card display using Bootstrap to ensure optimal responsiveness

Does anyone know how to create a card view using Bootstrap in HTML and CSS? https://i.sstatic.net/3hIsf.png I've been trying to replicate the image above with no success. Here is the code I have so far: <link href="https://stackpath.bootstrap ...

htmlcssbootstrap-4

Adding a stylish underline to text using HTML and CSS

Looking for some assistance with my Html and CSS website project. I am currently facing a challenge trying to place a border below the text as shown in the provided image. Below is the snippet of my Html code: <div class="Sectionheading"> ...

htmlcss

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

Working on a transition table module, my main challenge is presenting the output in a user-friendly manner. In the past, I used Excel for this task, where making the table readable was simple but extracting data from millions of rows took hours. Now with R ...

htmlrshinytransitiondt

What is the most effective way to enlarge an HTML table in the center?

Currently, I am dynamically generating an HTML table using a repeater. The table consists of four columns that I populate with company data. My goal is to enable users to click on a row and have another row appear below it, containing a Google map and addi ...

javascriptjqueryasp.nethtml

Creating a personalized layout for your WordPress posts with custom card designs

As a new developer diving into the world of WordPress, I am aiming to create a sleek and minimalistic grid/card layout for my website. Struggling to achieve this, I seek guidance on how to replicate the design seen in the following link: desired result H ...

csswordpressbootstrap-4customizationgrid-layout

`Center the image on top of the text`

Currently, I am working with Bootstrap 4 to create a component that includes two tiles. Each tile has an icon image on the left side and a hyperlink on the right side. On desktop view, the tiles should be displayed horizontally and vertically centered. How ...

javascripthtmlcssbootstrap-4

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

javascriptcsstwittertampermonkey

Position the Bootstrap icon to float to the far right

My icon is always positioned to the right instead of beside the input field. Take a look at the image below: https://i.stack.imgur.com/Bb1eH.png The icon does not align next to the input field. This is my code snippet : <div class="form-horizontal"& ...

csstwitter-bootstrap