天气图标只显示为正方形

Question

我试图使用Erik Flower的优秀天气图标here，但我无法让它发挥作用。我使用Flask，文件夹结构如下所示：

-static
  -css
  -fonts
  -js

我已将字体和css文件复制到上面各自的文件夹中。我插入了这样的css文件的链接：

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

它似乎工作正常，我可以在查看页面源时转到css文件。但是，当我尝试按照github页面中的描述显示图标时：

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

我得到一个正方形。我假设它没有找到它所期望的字体，但twitter引导字体在同一个目录中，似乎工作正常（我可以看到字形）。

我为可能是一个愚蠢的错误道歉。

非常感谢， 亚历

Answer 1

假设您没有更改CSS文件中的任何内容，则字体文件的路径不正确。

默认情况下，Bootstrap期望Glyphicons字体文件位于“font s ”目录中，但天气图标的CSS正在查找“font”目录（注意缺少的' S'）。调整CSS或将字体复制到正确的目录。

Answer 2

您需要在操作系统中将字体安装为可用字体...

在Windows上

这意味着将＆＃34;天气图标设为regular.ttf＆＃34;将文件存入fonts文件夹（您可以从控制面板轻松访问它）。

之后只需使用unicode十六进制代码来显示你想要显示的内容，并告诉小部件使用你安装的字体....各种天气apis的代码和关联都在＆＃34;值＆＃34中; ＆＃34;天气图标大师＆＃34;的文件夹文件夹，在weathericons.xml

下

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()

显然，您可以按照希望的方式调整字体和小部件样式...