8

I am looking to use a custom fontawesome icon, thx.

I would like to change the icon from folium.icon using fontawesome icons.

For example, I want to change this:

    import folium

    m = folium.Map(location=(25.0431, 121.539723), zoom_start=12,tiles='Cartodb Positron')

    folium.Marker(
        location=[25.0431, 121.539723], 
        icon=folium.Icon(color="red",icon="fa-truck", prefix='fa')).add_to(m)

    m

To a burger icon from fontawesome as shown below:

    folium.Marker(
        location=[25.0431, 121.539723], 
        icon=folium.Icon(color="red",icon="fa-hamburger", prefix='fa')).add_to(m)

But it does not work for me!

Many thanks!!!!

mayosten
  • 634
  • 5
  • 17
Doeiqw Dwe
  • 143
  • 2
  • 2
  • 5

3 Answers3

14

Revised

My earlier response neglected this issue with Folium and Leaflet: icons added in Fontawesome v5 do not currently render in Folium or Leaflet, upon which Folium is derived. Fonts that were part of Fontawesome v4, such as "truck" work just fine as you implemented. So you'll have to wait on "hamburger" or find another marker in the Fontawesome v4 list that does work.

Remember, you can always use Bootstrap icons as an alternative if you can't find what you want with Fontawesome.

The info provided below only valid for Fontawesome v4.x icons

Welcome! You should be able to render the icon with a slight modification to your icon constructor. In normal usage, the icon argument will point to standard glyphicons from Bootstrap. If you want to use Fontawesome icons, you put in the icon's name without the prefix (e.g. just "hamburger" without "fa-" in front), then add the prefix keyword argument for Fontawesome, which is fa.

So in your case it would look like this:

folium.Marker(
    location=[25.0431, 121.539723], 
    icon=folium.Icon(color="red",icon="hamburger", prefix='fa')
).add_to(m)

See this question as well.

mayosten
  • 634
  • 5
  • 17
  • hihi thank you for anwser, I saw that post, however, as I tried in the same way, still do not work. https://imgur.com/a/iFtTSX4 – Doeiqw Dwe Oct 29 '19 at 14:28
  • Do I understand that you _were_ able to get this to work with "fa-truck"? Can you get _any_ Fontawesome icons to plot? Can you get basic Bootstrap glyphicons to plot (e.g. `icon="glyphicon-check"` with no `prefix` argument)? – mayosten Oct 29 '19 at 17:00
  • @DoeiqwDwe this has to do with newer icons that aren't yet supported in Folium and Leaflet. See my revised response above. You'll have to use v4.x Fontawesome icons. Hopefully you can find one that works for your aesthetic! – mayosten Oct 29 '19 at 18:17
  • sorry for the late reply, and thank u so much for solve my question, thank u!!! – Doeiqw Dwe Nov 02 '19 at 01:38
4

Just use an image from internet (.png, .jpeg, etc)

m = folium.Map(location=[19,-99], zoom_start=5, tiles="Stamen Terrain")

icon = folium.features.CustomIcon('PASTE_URL', icon_size=(24, 24))

folium.Marker(
    location=[19.30,-99.27],
    popup="Mt. Hood Meadows",
    icon = icon,
).add_to(m)

Source: https://nbviewer.jupyter.org/github/ocefpaf/secoora_assets_map/blob/gh-pages/test_geojson.ipynb

berrodriquez26
  • 41
  • 3
3

I think this problem happens because folium use FontAwesome 4 while hamburger is an icon available after FontAwesome 5.7. So the solution is either to use the fonts in FontAwesome 4 icon list, or to fork Folium to update the library.

For me, at least folium.Icon(color='red',icon="car", prefix='fa') works.

natsuapo
  • 585
  • 9
  • 22