为什么在我的使用jekyll构建的Github网站上,Font Awesome无法正常工作?

11

我正在使用Jekyll构建我的博客网站,它托管在Github上,我正在尝试添加font-awesome. 然而fa图标没有显示出来,现在我的Github页面也没有更新到最新的博客文章。

我尝试将font-awesome样式表链接到我的css文件中。最终,在我的stylesheet.css文件中使用了{% includes font-awesome.css %},我认为这样可以正常工作。

在我的导航栏html中,我已经包含了典型的font-awesome i标签,如下所示:

<li><a href="{{ site.baseurl }}/index.html"><i class='fa-home'></i> Home</a></li>

但是我的Github页面上没有显示图标。

Github页面也不允许我使用Jekyll-font-awesome插件。这是我使用的插件: https://gist.github.com/23maverick23/8532525, 我添加了插件,jekyll build可以工作,但是在我将文件推送到Github后,我从Github收到了以下消息:

页面构建失败,并显示以下错误消息:

_includes/navbar.html,中的icon标签不是一个被认可的Liquid标签。 https://help.github.com/articles/page-build-failed-unknown-tag-error

因此,我已经删除了插件,并恢复为使用推荐的'i'标记而不是Liquid标记。

当我运行jekyll build时,一切都正常。然后我提交了更改并将其推到Github,没有出现错误。

当我运行jekyll serve并在本地查看时,图标会显示,我的最新博客帖子也可见。

但是当我进入我的Github页面时,我的新博客文章没有更新,font-awesome图标也没有显示。

我错在哪里?为什么Github Pages不喜欢Font Awesome?


没有代码很难发现错误,你有仓库的URL可以给我们吗? - David Jacquel
我相信 Github Pages 不支持 jekyll-font-awesome。它们只支持以下这些插件:https://help.github.com/articles/using-jekyll-plugins-with-github-pages。 - NellyLC
我还建议在这里查看 fontaweson Jekyll插件 https://github.com/drewish/jekyll-font-awesome-sass - Serhii Povísenko
2个回答

24

default.html中打开<head>标签后,引入字体awesome的CSS:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

那么,您应该将这些图标用作

<li><a href="{{ site.baseurl }}/index.html"><i class='fa fa-home'></i> Home</a></li>
如果这个方法不起作用,那么原因是因为如果你使用了插件,github 不会从 markdown 中构建你的页面。如果需要第三方插件,你应该有两个分支,一个用于源代码,另一个用于 jekyll 构建的 html 代码。你应该将构建后的代码推送到 master 分支,将源代码推送到其他任何分支中。在__config.yml 中进行配置以设置源和目标,并将目标发送到 master 分支。你可以查看我的__config.yml进行参考。我将源代码推送到 src 分支,将目标的内容推送到 master 分支。通过推送 html 构建,Github 将不会尝试从源代码构建网页。

谢谢。我意识到我忘记了“fa fa-home”中的第一个“fa”。 - NellyLC

1
可能是因为您拥有FontAwesome Pro帐户。如果您是FontAwesome Pro帐户持有人,则需要为计划使用Pro CDN链接的每个域注册。

例如,即使您在网站的中包含了Pro CDN链接,如下所示:
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha12345blahblahblahblahblah" crossorigin="anonymous">

你的图标仍然可能无法显示。为了解决这个问题,你需要登录到FontAwesome账户并将每个新域注册到你的CDN中。
我是一名专业用户(来自2017年Kickstarter活动),也遇到了这个问题。注册我的域名很快就解决了我的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接