python-visualization / python-visualization/folium

Font Awesome Brand Icons do not work

Ouverte
#2,278 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
Python
Étoiles
7.4k
Forks
2.3k
Merge moyen
17 h 22 min
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par exécuter la reproduction Flask de l’issue et inspectez le HTML généré ainsi que les polices web Font Awesome chargées dans Firefox ou Chromium. Suivez la façon dont folium.Icon traite le préfixe fa et comparez l’icône pleine heart avec l’icône de marque bluetooth. Le travail est terminé lorsque les deux marqueurs s’affichent correctement et qu’une vérification de régression couvre les icônes de marque.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, javascript, python
Domaine
data-visualization, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
67/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.