css复制的页脚不会显示图标

Question

以下是我试图复制的页脚：http://publish.gwinnett.k12.ga.us/gcps/home

这是我创建的jsfiddle：http://jsfiddle.net/r5gwdogq/

CSS我发现：我想知道{}

中的内容是什么

.gcps-icon-rss:before{content:"\e609"}
.gcps-icon-facebook:before{content:"\e60a"}
.gcps-icon-twitter:before{content:"\e60b"}
.gcps-icon-accessibility:before{content:"\e603"}.

我正在使用他们的样式表。一切都很好，只是图标不会显示，而是显示矩形......

Answer 1

这是他们自己的图标字体，您可以找到该页面请求它＆＃39;网络＆＃39; Chrome浏览器开发工具的标签，您可以尝试通过http://publish.gwinnett.k12.ga.us/ux/3/dist/fonts/gcps-icons.woff?-8wnfnr

获取它

它是如何工作的： 你的css为.gcps-icon-rss等定义了font-family，并附上你应该下载的字体

将类.gcps-icon-rss添加到例如＆＃39;跨度＆＃39; - 你的css将图标描述为＆＃34; \ e609＆＃34;在你的跨度之前。您可以使用真棒icomoon app创建自己的设置 - 下载后会找到详细的自述文件

Answer 2

content属性包含应放入:before伪元素的内容。在这种情况下，它是一个unicode角色。

您获得黑匣子的原因是因为没有加载用于图标的字体。

作为概念的证明补充：

<link rel="stylesheet" href="http://publish.gwinnett.k12.ga.us/gcps/home/ux/3/dist/css/gcps-ux.css">

然后图标应该加载。

请注意，您不应该链接其他人的服务器，并且未经他们明确同意使用他们的样式表可能会侵犯版权。

如果您正在寻找类似的图标，请尝试FontAwesome。

Answer 3

您需要下载字体＆＃34; GCPS Icons＆＃34;从其他网站或您可以使用字体真棒 - http://fortawesome.github.io/Font-Awesome/