为什么W3School的glyphicons像素化？

Question

为什么这些有用的gliphicons像素化,即使在W3Schools自己的网站上？我正在尝试使用这些并遇到同样的问题.请参阅glyphicon-search作为示例.

我尝试过旋转,抗锯齿等.没有任何作用.

如果它在W3Schools自己的网站上显示如此 - 这是一个"功能"吗？我应该使用其他一些小图标吗？这是一个例子 - 正确的是一个真正的问题:

Answer 1

正如更多人已经告诉的那样，glyphiconsw3schools 的课程很糟糕。或者至少比其他的更像素化。

可能导致此问题发生的一些问题是：

• 浏览器版本和/或缓存
• 加载错误glyphicons。您可以通过在浏览器中查看控制台来检查这一点。
• 一个糟糕的来源glyphicons。

我一直使用并且没有任何问题的源是来自glyphiconsbootstrap您可以glyphicons通过将以下代码添加到标头来使用它们：

<!-- Fonts and Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

注意：现在可能会有更新的版本，您可以在这里找到脚本

下面是正确加载字形图标的示例代码：

<i class="fa fa-facebook-square" aria-hidden="true"></i>