Joh*_*n U 22 html javascript css font-awesome
我正在开发一个网页,发现FontAwesome是一种非常巧妙的方式来添加漂亮的图标,但默认情况下,Firefox 的NoScript插件会阻止字体下载.
对于普通字体,这不会是一个问题,但FontAwesome使用的unicode字符故意超出大多数字体的常规可打印范围,因此将字体堆栈添加到CSS(EG :) font-family: FontAwesome, sans-serif;将无法正常工作,因为所有图标都呈现为十六进制-squares.
我意识到我可以调整NoScript以允许字体下载,但这不是所有用户的理想解决方案 - 我宁愿页面优雅地降级.
当然,使用Javascript/jQuery很容易做到这一点,但当然如果NoScript正在进行阻塞也没有任何帮助,如果用户没有启用javascript,则测试失败.
理想的是有一些CSS样式/规则作为任何FontAwesome对象的后备,用一些基本字符替换它们甚至不显示任何东西.
对于那些不熟悉FontAwesome/TL的人; DR:
所有FontAwesome图标都有CSS类"fa":
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
FontAwesome加载这样的自定义字体(我删除了
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}
然后一个特定的FontAwesome图标将有自己的特定类,插入相关的unicode字符,例如:
.fa-star:before {
content: "?";
}
图标的HTML将如下所示:
<i class="fa fa-star"></i>
所以这里的问题是: 如果未加载字体"FontAwesome",我们需要某种方式,最好是在CSS中,用CSS类"fa"替换,删除或隐藏项目的内容.
解决这个问题的一种方法是为<noscript>用户提供另一个CSS文件,并覆盖.fa-*图像或精灵的类.
例如:
<noscript>
<link rel="stylesheet" type="text/css" href="safe-icons.css" />
</noscript>
您的safe-icons.css文件可能如下所示:
.fa {
display: inline-block;
overflow: hidden;
color: transparent;
font-family: sans-serif;
width: 16px;
height: 16px;
background-position: center center;
background-repeat: no-repeat;
}
.fa-star { background-image: url('star.png'); }
当然,你会遇到处理从FontAwesome中提取的具有不同大小的图标的问题,但这肯定会达到平衡,并且至少为启用NoScript的用户呈现内容.
好吧,我想我解决了这个问题,感谢你们带领我朝着正确的方向前进:
在头部,我把这个:
<noscript>
<style>
[class*="fa-"]:before
{
content:"+";
}
</style>
</noscript>
这将选择每个fa-icon类项目,这些项目都在模式中定义:
.fa-heart:before {
content: "\f004";
}
并用通用字符替换内容,或者实际上我们可能需要插入的任何其他内容(包括任何内容).
这看起来是否合理,或者我在这里错过了一些可怕的副作用？
我意识到有一个远程的可能性,有人阻止字体加载,但启用了javascript,但现在我很高兴忽略该客户人口统计;)
编辑添加:
在这段时间之后,这个答案仍然得到了投票(谢谢!),显然它仍然是一个问题,所以我想我会发布这个链接,以各种方式大大改进(和修剪)FontAwesome: FontAwesome Fixed
我最喜欢的是将选定的图标嵌入到内联Base64编码的SVG中,无论是在HTML还是CSS中.这看起来非常优雅和高效,特别是如果您只需要一组图标.足总仍觉得对我有点软糊涂.