python-visualization / python-visualization/folium

Font Awesome Brand Icons do not work

Open
#2,278 1 comment 0 reactions 0 assignees View on GitHub

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

Image

folium is maintained by volunteers. Can you help making a fix for this issue? Probably not

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.