标签: icon-fonts

我知道图标字体只是字体,你可以通过调用它们的类名来获取图标,但图标字体如何工作？

我已经尝试检查Chrome中加载的相关图标字体资源,以查看图标字体如何显示图标(与普通字体相比),但我无法弄清楚这是如何发生的.

即使有大量的图标字体可用,我也没有成功找到有关这种"图标字体技术"的资源.还有大量资源显示如何集成图标字体 ,但似乎没有人分享或写下如何完成这些!

我想知道是否可以使用图标字体图标(例如Font Awesome)作为Google Maps V3中的标记来替换默认标记.要在HTML或PHP文档中显示/插入它们,标记的代码将是:

<i class="icon-map-marker"></i>

我在网站上使用fontello作为一些图标.当您从fontello下载时,他们提供:

• .TTF
• .woff
• .SVG
• .eot
• 使用@font face的css文件将所有内容链接在一起

一切都运行正常,但我总是发现自己有这个问题,如果有人能给我一个提示我想要:

- 如果我想在下载后将新图标添加到此集中,该怎么办？

有很多图标,再次搜索可以带来错误.我想知道是否有一种简单的方法来下载额外的图标并将其添加到您已经拥有的集合中.

我想将这个字体图标旋转45度.该图标有这个CSS(所有CSS通过LESS编译):

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

这就是Flaticon:http://www.flaticon.com/free-icon/hand-pointer_70655

我已将其安装为图标字体.

但是,当我尝试将其旋转45度,以便手指指向右上角时,它不起作用.我正在尝试安装这样的图标:

<i class="flaticon-hand-10 gly-rotate-45"></i>

这是班级gly-rotate-45:

.gly-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

浏览器正在启动transform: rotate(45deg);,但图标未旋转.如何旋转此图标字体？

我的经理告诉我不要在我们的网站上使用图标字体,因为它是另一个http请求加上额外的下载KB.另外因为我必须使用content before字体(我不能更改html),他更喜欢背景图像,所以它适用于IE7.

就个人而言,我喜欢这些小东西,非常好,清脆,可调整!

我得到它,如果我们只在网站上使用几个图标,但如果我会使用,在网站上说5个图标 - 你们怎么想？值得使用图标字体还是他认为不是？

我只是一个新的和令人兴奋的吸盘,而今年它是视网膜显示器.

我正在使用带有图标但没有图像的CSS按钮.图标是使用unicode值生成的.
在这方面我遇到了一些问题,一些浏览器不支持某些unicode值.因此,它代替正确的图标显示一些不需要的符号.

要在任何浏览器中为Unicode提供支持,我们必须遵循哪些步骤？

我想为我的图标字体做一个后备.例如,对于我漂亮的图标字体复选标记我使用Unicode复选标记等效:

.icon-checkmark {
    &:before {
        content: "\2713"; /* Unicode Character 'CHECK MARK' (U+2713) */
    }
}

我的图标字体也有代码"\ 2713"的字符.如果我的图标字体无法加载,用户将看到Unicode复选标记; 如果图标字体加载成功,用户将看到图标字体的漂亮复选标记.

我正在为« email »,« save »和« print »实体搜索Unicode字符等价物.Unicode表中是否有任何类似的内容？我在http://www.fileformat.info/上搜索过但没有运气.

(我发现只有一个"电子邮件"字符 - http://www.fileformat.info/info/unicode/char/1f4e7/browsertest.htm,但它在Chrome 28中不起作用(但它适用于所有其他浏览器: ).

我想创建一个用于Web应用程序的图标字体.fontAwesome,Iconic,fontomas是我想做的例子,但我需要使用自定义图标.我不知道从哪里开始.任何帮助表示赞赏.

将字体更新为现有字体

我已经在我们的网站上使用了5个icomoon字体,这些字体是从icomoon下载的.我想要包含2个以上的字体.我该怎么办？

我可以将新的2种字体添加到现有字体吗？如果是,我该如何添加它们？

font-display是一个新的 CSS 属性，允许开发人员根据字体加载速度是否足够快来控制字体的呈现方式。已经有几篇文章介绍了：

• 使用 font-display 控制字体性能 - Google Developers
• font-display 为大众

他们都没有提到图标字体。该规范确实有一个示例，其中提到了该block值的图标字体，但对我来说使用它没有意义：

'堵塞'

给字体一个短的阻塞周期（在大多数情况下推荐 3s）和一个无限的交换周期。

如果我正确理解规范，这意味着如果图标在“短块期”之后没有加载，将使用后备字体，导致随机字母出现在它们的位置。

如果我使用该optional值，随机字母将永远不会出现，但如果图标没有在“极小块周期”中加载，它们也不会出现。

在没有交换的情况下提供无限块周期似乎没有值（因此它会显示不可见的文本，直到并且除非字体加载）。这背后是否有原因，是否有解决方法？