Skip to content

Vendor a glyphicons-only stylesheet instead of the full Bootstrap 3 base - #2257

Open
adarshsm wants to merge 2 commits into
python-visualization:mainfrom
adarshsm:fix/1820-vendored-glyphicons
Open

Vendor a glyphicons-only stylesheet instead of the full Bootstrap 3 base#2257
adarshsm wants to merge 2 commits into
python-visualization:mainfrom
adarshsm:fix/1820-vendored-glyphicons

Conversation

@adarshsm

Copy link
Copy Markdown

Closes #1820. Thanks @hansthen for the steer.

folium loads netdna's bootstrap-glyphicons.css for the Awesome Markers glyphicon font. Despite the name, that file is a full Bootstrap 3 base stylesheet — alongside the @font-face/.glyphicon rules it ships a normalize reset and global body rules (font, colour, background, margin). Loaded after Bootstrap 5, those body rules leak onto the host page and, for example, mis-position a user-added Bootstrap 5 modal (the original report).

This vendors folium/templates/glyphicons.css containing only the @font-face and .glyphicon/.glyphicon-* rules (fonts served from jsDelivr), referenced the same way as the existing leaflet.awesome.rotate.css. Icon(prefix="glyphicon") markers keep working exactly as before; the page-wide body/reset pollution is gone.

Not a customer-facing change — glyphicon markers are unaffected; the only difference is that folium stops overriding the host page's body styles. Added a regression test asserting the vendored file is used and the netdna URL is gone.

folium loaded netdna's bootstrap-glyphicons.css for the Awesome Markers
glyphicon font. Despite its name that file is a full Bootstrap 3 base
stylesheet: alongside the @font-face/.glyphicon rules it ships a normalize
reset and global body styles (font, colour, background, margin). Loaded
after Bootstrap 5, those body rules leaked onto the host page and, e.g.,
mispositioned user-added Bootstrap 5 components (python-visualizationGH-1820).

Ship a vendored folium/templates/glyphicons.css with only the @font-face
and .glyphicon/.glyphicon-* rules (fonts served from jsDelivr), referenced
the same way as leaflet.awesome.rotate.css. Icon(prefix="glyphicon")
markers keep working; the page-wide body/reset pollution is gone.

Closes python-visualization#1820
…DN file

The previous approach linked the vendored glyphicons stylesheet from
`cdn.jsdelivr.net/gh/.../folium/templates/glyphicons.css`. That URL is
served from the default branch, so it 404s until this PR is merged — a
chicken-and-egg that fails the snapshot job (the `.glyphicon` rules never
load) and, for a released package, would point at a mutable `main`.

Inline the glyphicons-only rules into every `Map` as a `<style>` block,
read once from the packaged `folium/templates/glyphicons.css`. Markers keep
working with no external stylesheet request and no page-wide side effects,
which is the python-visualizationGH-1820 goal; the glyph font still loads from the stable
`bootstrap@3.3.7` npm files. Update the vendoring test to assert the rules
are inlined rather than linked.
@adarshsm

adarshsm commented Aug 1, 2026

Copy link
Copy Markdown
Author

Pushed a follow-up that should fix the failing snapshot job.

What was wrong: the vendored stylesheet was linked from cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/glyphicons.css, which jsDelivr serves from the default branch — so it 404s until this PR is merged (curlHTTP 404). In CI the .glyphicon rules never load, and for a released package the URL would also point at a mutable main. It's the same /gh pattern awesome_rotate_css uses, but that file already exists on main; a brand-new vendored file can't resolve that way pre-merge.

Fix (59a744c): inline the glyphicons-only rules into every Map as a <style> block, read once from the packaged folium/templates/glyphicons.css. No external stylesheet request, no chicken-and-egg, and it keeps the GH-1820 goal (no Bootstrap-3 body reset leaking onto the host page). The glyph font still loads from the stable bootstrap@3.3.7 npm files (HTTP 200). Locally: 23 test_folium.py tests pass, black/ruff clean, and glyphicon markers render (icon classes map to the inlined .glyphicon-* rules).

One thing that still needs doing: the 7 snapshot baselines legitimately change, because dropping the leaked Bootstrap body-reset alters rendering even for non-glyphicon maps (e.g. issue_1885). Those need regenerating from the CI Ubuntu/Chrome environment. The workflows on my latest push are sitting in action_required — if a maintainer approves the run, I'll grab the screenshots artifact, sanity-check the renders, and commit them as the updated baselines.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Default CSS for glyphicons produces conflict with bootstrap5 components (with potential solution)

1 participant