python-visualization / python-visualization/folium

Font Awesome Brand Icons do not work

Aperta
#2,278 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
Python
Stelle
7.4k
Fork
2.3k
Merge medio
17h 22m
PR unite (30g)
11

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia eseguendo la riproduzione Flask dell’issue e ispezionando l’HTML generato e i web font Font Awesome caricati in Firefox o Chromium. Traccia il modo in cui folium.Icon gestisce il prefisso fa e confronta l’icona solid heart con l’icona brand bluetooth. Il lavoro è completo quando entrambi i marker vengono visualizzati correttamente e un controllo di regressione copre le icone brand.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
css, javascript, python
Ambito
data-visualization, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
67/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.