Changing Icons on HTML Template

1

I’m customizing quantum. There are svg icons on the template. The stylesheet code for icomoon and flaticon in the head looks right.

All icon class looks like “bi bi-XXX” When I change the XXX to any another common icon name, update the css and save the file, I still see the XXX icon in my browser, even after refreshing multiple times.

Any ideas?

2

Hi there

I need some more information, please provide link to the page, screenshot and steps to replicate your problem

Regards

3

I’m doing this on my desktop so there’s no link. In the first screen shot I changed the <svg…class to bi bi-person-fill from lightning. I save the changes, update the css. The image in the browser should change to a person icon but the lightning is still there.

They system will only let me attach one image so I’ll add another post for the second screen shot.

Screen Shot 2022-01-12 at 8.43.38 AM
Screen Shot 2022-01-12 at 8.43.38 AM1680×1050 207 KB

4

Screen Shot 2022-01-12 at 8.43.55 AM
Screen Shot 2022-01-12 at 8.43.55 AM1680×1050 164 KB

5

Any idea why these icons seem to be hard coded and unable to be changed?

6

Hi there

I still have a problem to replicate the problem, any chance to get it online?

7

Even if I uploaded the page to my server, I would not give you administrator access to the directory so I am unsure why you would prefer to have it uploaded when you own the code and can recreate my problem exactly if you do as follows:

  1. Open index.html within the Quantum folder, using your favorite html editor.
  2. Locate the following code.


  3. class=“bi bi-lightning-fill” places a lightning bolt on index.html.
  4. open index.html in a browser
  5. See the lightning bolt displayed on the page.
  6. Replace “bi bi-lightning-fill” with the code for any other icon.
  7. open index.html in a browser

You will see that the new icon is NOT displayed on the index.html page.

8

Any solution to this problem? You can see the site at www.munnstech.com

9

Hi

Ok, I just realized what you are doing, you want to change the SVG icons and you want to do this by changing the CSS class? nope, it will not work, it’s an SVG, it’s not a font icon.
Instead, replace it with your custom SVG icon try this source: https://icons8.com/ or implement font icon instead of SVG