python-visualization / python-visualization/folium
Font Awesome Brand Icons do not work
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 7.4k
- Forks
- 2.3k
- Avg merge
- 17h 22m
- Merged PRs (30d)
- 11
Description
Describe the bug
Brand icons from font-awesome do not render correctly.
To Reproduce
from flask import Flask, render_template_string
import folium
app = Flask(__name__)
@app.route("/")
def fullscreen():
"""Simple example of a fullscreen map."""
m = folium.Map(location=[41, -71], zoom_start=4)
folium.Marker(location=[41, -72],
icon=folium.Icon(prefix='fa', icon='fa-heart')).add_to(m)
folium.Marker(location=[41, -75],
icon=folium.Icon(prefix='fa', icon='fa-bluetooth')).add_to(m)
return m.get_root().render()
if __name__ == "__main__":
app.run(debug=True)
Expected behavior
All icons to render correctly
Environment (please complete the following information):
- Browser: Firefox 140.15.0esr and Chromium 152.0.7977.64
- Jupyter Notebook or html files? Flask
- Python version:
sys.version_info(major=3, minor=13, micro=5, releaselevel='final', serial=0) - folium version:
0.19.5+dfsg - branca version:
0.8.1
Additional context
It seems that the appropriate web font is not loaded. If I go to Web Developer Tools -> Inspector -> Fonts -> All Fonts on Page only https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/webfonts/fa-solid-900.woff2 is loaded and I believe the glyph for bluetooth is in https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/webfonts/fa-brands-400.woff2 so it isn't rendered correctly.
Screenshots
folium is maintained by volunteers. Can you help making a fix for this issue? Probably not
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the Flask reproduction from the issue and inspecting the generated HTML and loaded Font Awesome web fonts in Firefox or Chromium. Trace how folium.Icon handles the fa prefix and compare the solid heart icon with the brand bluetooth icon. Done means both markers render correctly, with a regression check covering brand icons.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript, python
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 67/100