Forums

Hello, I seem to have a problem with my web app displaying bootstrap icons. I am using django-bootstrap-icons (can be found here https://pypi.org/project/django-bootstrap-icons/). Note that these icons work fine when I run server locally (i.e. I have set up everything correctly). I have also checked that everything is installed on pythonanywhere as it should be. Now, instead of icons I get text: "Icon" does not exist.

Any idea why that might be? Many thanks in advance.

Could you give an example of a page on your site that is showing the problem? Also, you might find this help page on debugging static file problems useful.

Here are two link for each image showing how this looks on locally hosted web app vs one on pythonanywhere

• https://ibb.co/bvhdZGF -> pythonanywhere

• https://ibb.co/vw6SVK7 -> locally hosted

This thing happens to all icons regardless of template.

Yes. You need to serve your static files, as Giles said.

All of my static files are working as well as all of my media file (i.e. image upload). Hence I am not sure how else I should set up my static file paths as there is no file specifically for bootstrap or javascript or bootstrap icons.

Then use the developer tools in your browser to see what might be happening to the requests for the icons.

Ok so looking at error log for my web app I get error:

• Not Found: /favicon.ico

I checked this stack overflow thread and the answer suggest somehow aliasing this favicon.ico file (link: https://stackoverflow.com/questions/66075196/favicon-icons-not-found-django-website-with-bootstrap-at-front). But the problem is I dont have any such file and the icons are directly inserted via svg tag.

Icon <https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/icons/bookmark-heart-fill.svg> does not exist

but it should be like this:

<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-bookmark-heart-fill" fill="currentColor" viewBox="0 0 16 16" width="1.5em" height="1.5em">


<path d="M 2 15.5 a 0.5 0.5 0 0 0 0.74 0.439 L 8 13.069 l 5.26 2.87 A 0.5 0.5 0 0 0 14 15.5 V 2 a 2 2 0 0 0 -2 -2 H 4 a 2 2 0 0 0 -2 2 v 13.5 Z M 8 4.41 c 1.387 -1.425 4.854 1.07 0 4.277 C 3.146 5.48 6.613 2.986 8 4.412 Z" />
</svg>

I have also noticed that when using locally hosted version, there is no GET request for favicon.ico file.

Edit:

After further inspection I have noticed this message:

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.

Browsers make a request for favicon.ico so they can show the favicon in the tab header. My guess would be that they do not do that for local content. The favicon has nothing to do with other icons that you may want in your page.

Ok so any idea how to resolve that? I have tried manually putting this:

<svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16">
<path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"></path>
</svg>

intead of the original: {% bs_icon "trash3" size="1.3em" %} but to no avail. Does pythonanywhere have a problem with displaying SVG icons?

EDIT

Ok, looking now at different payed versions of pythonanywhere, it seems that free version has a whitelist of websitets you can make http request to and for w3 there seems to only be dev.w3.org. Do you reckon this is the problem?

What, exactly are you trying to resolve by adding the favicon code? It's not a whitelist issue, because that request would be made from the browser that loaded the code, not from PythonAnywhere.

What I was trying to do in the example above was to replace the django code that would normally be substituted by that large svg tag by the tag itself thinking maybe pythonanaywhere has a problem with django in this way. However, it turned out that the icon does not show even when I try to put it there manually. So my conclusion was that there is likely problem with

xmlns="http://www.w3.org/2000/svg"

part of the SVG. I was thinking that pythonanywhere does not allow external http requests or something because icons display just fine when hosted locally using the same browser. Also, when hosting my web app on Heroku, icons are displayed just fine (but I dont want to use Heroku as I need media files).

Do you see any errors in the developer tools console when you load your site?

Sorry for late reply, I have solved this problem by upgrading from free to paid version. I got the hacker version for 5$ a month. It was as I was thinking that free version of PythonAnywhere block any HTTP request that is not in the whitelist which http://www.w3.org/2000/svg was not. Anyway, thank you for your effort to help!