Twitter Bootstrap Question posted in

Weather icons just appear as squares – Twitter bootstrap

I’m trying to use Erik Flower’s excellent looking weather icons here, but I can’t get it to work. I’m using Flask and the folder structure looks like this:

-static
  -css
  -fonts
  -js

I have copied the fonts and css files into their respective folders above. I insert a link to the css files like this:

<link href="{{ url_for('.static', filename='css/weather-icons.min.css') }}" rel="stylesheet" media="screen">

And it appears to work fine, I can go to the css file when I view page source. But when I try to display the icons as described in github page like this:

<i class="wi wi-day-sunny"></i>

I just get a square. I assume it’s not finding the fonts where it is expecting them, but the twitter bootstrap fonts are in the same directory and seem to work fine (I can see the glyphicons).

I apologize for what might be a stupid mistake.

Thanks a lot,
Alex

Tags:

2

Answers


  1. 0

    Assuming you didn’t change anything in the CSS file, the path to the font file(s) is incorrect.

    Bootstrap, by default, expects the Glyphicons font file to be in a “fonts” directory, but the CSS for the weather icons is looking for a “font” directory (notice the missing ‘s’). Adjust the CSS or copy the fonts to the correct directory.

    Login or Signup to reply.
  2. 0

    you need to install the font in your operating system as a usable font…

    on windows this means put the “weather icons regular.ttf” file into the fonts folder (you can easily get to it from the control panel).

    after that just use the unicode hex codes for what you want to display, and tell the widget to use the font you installed…. the codes and associations for various weather apis are in the “values” folder of the “weather-icons-master” folder, under the weathericons.xmlweather font in use python 3.6, windows

    for python 3.6

    from tkinter.font import font
...
weather = Font(family="weather icons regular")
fontsize = 20
...
example = Button(master, text="uf01e,uf01e,u...", command=some_def)
example.configure(font=(weather, fontsize), fg="white", bg="black")
example.pack()

    obviously you can adjust your font and widget styling the way you want it to look…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search