Icons not showing up on Opencart version 2.0.1.1

My current opencart version is 2.0.1.1 and everything was working perfectly until one day I noticed that some of the icons such as contact us, wish list, and search were suddenly missing. After searching through the images folder, I couldn't locate the missing icons.

  1. Upon inspection of the first image, I observed that the header icons like contact us were missing.
  2. The second image showed that the search icon and cart icon in the add to cart button were also missing.
  3. In the third image, I noticed that the home icon in the search result page was missing and an arrow was misplaced.

Additionally, even the slide bar arrow seemed to be missing.

I am considering uploading the images again, but I'm unsure about where to do so. Can someone provide assistance or guidance on this issue? Thank you.

htmlcssopencartfont-awesomeopencart2.x

Answer №1

If you're encountering missing images, one effective way to troubleshoot is by utilizing your browser's web inspector during the page loading process. This will allow you to pinpoint which assets are not loading and where they should be located.

For Firefox users, the Firebug extension proves to be a valuable tool for various client-side debugging tasks, including addressing missing images.

Answer №2

It seems that the "font awesome" font is missing from your system.

To resolve this issue, please verify the following folder: OPENCART ROOT->catalog/view/javascript/font-awesome/fonts

Make sure that you have these 5 files in the directory:

  • FontAwesome.otf
  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

If any of these files are not present, you can re-download opencart and copy them over to rectify the problem.

Answer №3

Resolving FontAwesome complications in OpenCart

// HTTP
define(‘HTTP_SERVER’, ‘https://www.blazingcoders.com‘);

// HTTPS
define(‘HTTPS_SERVER’, ‘https://www.blazingcoders.com‘);

config.php – Located in OpenCart admin folder
// HTTP
define(‘HTTP_SERVER’, ‘https://www.blazingcoders.com/admin/‘);
define(‘HTTP_CATALOG’, ‘https://www.blazingcoders.com/‘);

// HTTPS
define(‘HTTPS_SERVER’, ‘https://www.blazingcoders.com/admin/‘);
define(‘HTTPS_CATALOG’, ‘https://www.blazingcoders.com/‘);

For a detailed explanation, please refer to the following article

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

Trouble aligning 'nav' to the center of the page in the metro-bootstrap.css file

Struggling with alignment issues in my navigation list while using 'metro-bootstrap.css' from . Despite numerous attempts, I can't seem to get it right. Visit advinadv.co.uk for a closer look. Any assistance would be greatly appreciated! Be ...

htmlcsstwitter-bootstrap

Using JQuery, you can predominantly focus on an html element by referencing its title tag

Is it possible to target an HTML element based on its title tag? Consider the following example: <a class="cat" title="categoryName">categoryName</a> How can we select this anchor element by its title tag and then add some text to it? I att ...

jqueryhtmltagsappendtitle

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...

htmlcssangulartypescript

Guide to utilizing a download link for file retrieval in Python

I'm currently working on creating a script that can automatically download specific files from webpages and save them to designated folders. For the most part, I've been successful in achieving this using Python, Selenium, and FirefoxPreferences ...

htmlpython-2.7selenium-webdriverdownload

"Error: Unable to locate the specified HTML ID within the dynamic

With the use of JavaScript, I am dynamically creating td elements and assigning IDs from a for loop. However, I am encountering an issue where my onclick event is unable to fire because it throws an error stating that the ID cannot be found. Despite inspec ...

javascriptjqueryhtml

The sticky header is malfunctioning due to a null offsetTop value

import React , {useRef, useEffect} from 'react' import './header.css' const nav_links =[ { path:'#home', display:'Home' }, { path:'#about', display:'About& ...

javascripthtmlreactjsnavbar

What could be causing my SVG to overlap with its parent div?

I am currently working with the following HTML and CSS: <div class="LABEL_MAIN"> <div class="LABEL_BOX"> <div class="OP_LABEL"> bro </div> </div ...

htmlcsssvg

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

javascriptjquerycssqtip2

Tips to stop excessively long text from overflowing its containing div

Let's fit as many text lines as the div's height allows. <div class="row g-0"> <div class="col-md-3 align-content-center"> <div class="d-flex justify-content-center"> <!-- svg image - ...

htmlcssbootstrap-5

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

When hovering over the menu, the underline appears, not based on the length of the

Is there a way to make the underline below menu items on hover match the length of the word instead of the element? <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand active" href="index.html"> <img src= ...

cssbootstrap-4underline

Could you please provide instructions on how to manipulate the :root CSS variable using JQuery?

Is there a way to update the :root css variable using jquery? :root { --color: #E72D2D; } .box-icon { background-color: var(--color); } I tried but it doesn't seem to work $("#blueColor").click(function(e) { $(":root").css("-- ...

jquerycss

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

What steps do I need to take to implement AJAX form authentication?

I have set up a login screen that validates username and password credentials through a php script. When a user enters their information and submits the form, the authenticate.php file executes an LDAP bind. If the credentials are correct, the user is redi ...

phpjavascripthtmlajaxopenldap

The information submitted through a Django form is being beautifully displayed in an HTML table

I'm having trouble displaying variable values in an HTML table after submitting form data using the fetch API. The form data is successfully fetched in views.py, but I can't seem to send it back to the HTML file to show the data on a table. If I ...

javascriptpythonhtmldjangofetch-api

Secure HTML / CSS for JavaScript? I am unable to modify certain attributes during runtime

Due to ongoing discussions about blog colors for business purposes, we are looking to provide users with a "tool" (for those who are tech-savvy) to experiment with colors themselves. Our blog is a basic Wordpress site with various plugins (such as Google ...

javascripthtmlcss

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

javascriptcss

Two rows of images with a horizontal scroll bar

Looking to create a grid of images where each image is displayed side by side. The goal is to have a fixed width and height for the container, with a horizontal scrollbar appearing if there are 12 or more images in the grid. Additionally, any overflow imag ...

css

Position CSS triangles for active hyperlinks

I'm having trouble creating a triangle for hover-over links, as the triangle always shows up in one corner instead of below the links. Can anyone help me pinpoint the exact issue? Fiddle #navcontainer a:hover::after { background: white; ...

htmlcsshtml-lists

Choosing the Right Project for Developing HTML/Javascript Applications in Eclipse

Whenever I attempt to build a webpage using eclipse, I am presented with two choices: -- A Javascript project -- A Static web project If I opt for the former, setting up run to open a web browser can be quite challenging. If I decide on the latter ...

javascripthtmleclipseproject