图标字体用于在您的网站内容中包含某些标准图标。 这 字体“真棒” 是一个很好的例子,与其他图标字体相比具有许多优势。 我们还建议使用 图标字体 来自 Freepik 作为一个很好的选择。
Font Awesome 最初是由 戴夫·甘迪 用于 Twitter的引导. Font Awesome 可以与 WordPress 使用 字体真棒图标插件 设计 雷切尔·贝克(Rachel Baker).
以下是对此类字体的简要介绍,以及 Awesome 字体在哪些方面适合可能仍处于起步阶段的样式。
为什么使用图标字体
当您设计网站时,图像会因其文件大小而占用大量网络空间。 还必须使用 HTML 标记将它们调用到您的网页。 不仅如此,它们的缩放经常是一个问题,随着它们的大小增加而失去定义。 常规图像仅在以其最初设计的尺寸使用时才能按预期解析。
当您寻找标准图标图像(例如车辆、某些标点字符或图形图表图标)时,图标字体可以为您提供无论字体大小如何看起来都相同的可缩放图像。 这就像无论您使用 2 号或 5 号还是 10 或 24 磅字体大小,字母和数字看起来都一样。
在许多情况下,人们只是因为这个问题而不使用图像,因此他们的文章或在线报告的细节或清晰度会受到影响。 通过使用 Font Awesome,他们可以将基本图标添加到他们的站点并将它们缩放到所需的大小,仅受其文档尺寸的限制——而且他们可以这样做而不会丢失定义。 您可以像查看可缩放字体字符一样查看可缩放图标。
以下是一些可用的视频播放器和社交图标:
还有 3.0 版附带的新图标:
这些中的每一个都可以在不损失清晰度的情况下增加大小。 您可以更改它们的颜色并轻松添加阴影并更改其透明度。 事实上,你可以用它们做任何你可以用图像做的事情,然后是一些,而没有文件大小的缺点。
这基本上就是图标字体可以做的事情,尤其是 Awesome 字体。 以下是有关如何使用它们并充分利用它们的一些信息,以及与图标正面相关的一两个缺点:
使用字体真棒
使用普通 Bootstrap CSS:
通过将 Awesome 字体目录复制到您的项目中,然后将 font-awesome.min.css 复制到项目中,可以将 Font Awesome 与默认的 Bootstrap CSS 一起使用。 然后您必须打开 font-awesome.min.css 并编辑字体路径以确保它们指向 Awesome 位置。
在 HTML 的 Head 部分,应该引用 font-awesome.min.css 的位置:
字体路径相对于您的 CSS 目录。
使用 Bootstrap Less:
如果你使用 Twitter Bootstrap 和 LESS CSS,那么首先将 Font Awesome 字体目录复制到你的项目中,然后将 font-awesome-less 复制到你的 Bootstrap Less 目录中。 然后:
- a) 打开 bootstrap.less 并替换 @import “sprites.less”; 使用@import “font-awesome.less”;
- b) 打开您项目的 font-awesome.less 并编辑 @FontAwesomePath 变量以指向您的字体目录。
@FontAwesomePath: "../font";
字体路径相对于您编译的 CSS 目录。
然后你就全部设置好了——尽管如果你使用的是静态编译器,你应该重新编译 LESS。
不使用 Bootstrap:
如果你没有使用 Bootstrap,那么在将字体文件复制到你的项目目录后,你可以将两个 font-awesome 文件中的任何一个复制到你的项目中,打开它结束然后编辑字体的位置以指向字体目录。
如果您使用的是 Internet Explorer 7,请使用 font-awesome-ie7.min.css
如何在 WordPress 中使用 Font Awesome
有两种简单的方法可以在 WordPress 中使用图标字体,一种是您上传了插件*。 您可以使用 HTML 或使用短代码嵌入它们。 以下是每个示例:
使用 HTML: 您希望字体出现的位置,只需将项目名称添加到类名称中即可:[html] [/html]
将添加一个黑色圆圈。
您可以这样更改圆圈的大小:
如果您打算经常使用相同大小的图标,您可能会发现将字体大小添加到 CSS 样式表会更容易,并且上述格式用于例外情况。
使用简码: 简码更容易,但通常仅适用于帖子编辑器屏幕中的帖子和页面内容。 格式为 [icon name=icon-circle] 您想要圆圈的位置。
图标字体的缺点
当您需要向博客或网站添加特定图标时,图标字体似乎非常有用,并且可以链接它们以执行特定功能。 然而,并非一切都是完美的,图标字体也有缺点。 这些是不适用于 Font Awesome 的图标字体用户报告的常见问题 - 这就是它如此“真棒!”的原因。
- 一个是屏幕阅读器的潜在问题,它可能会将图标大声读出为字母。 由于检索字体字符的方式,这不是 Font Awesome 的问题。
- 它们只能以单一颜色呈现——或使用 CSS3 渐变以颜色渐变呈现。 这是图标字体的真正问题吗?
- 创建自定义字体以满足您的需求可能需要时间。 但是,Font Awesome 已经提供了大量令人敬畏的字体,并且该列表还在不断扩展。 虽然是免费的闭源字体,但会定期添加用户设计的认可字体。
Font Awesome 生成器摘要
Font Awesome 生成器是目前可用的最好的免费图标字体之一。 虽然它是为与 Twitter Bootstrap 一起使用而设计的,但它也可以适应在常规网站上使用,并且还有一个 WordPress 插件可以提供最好的这种图标字体。 如果您使用图标字体,请尝试使用 Font Awesome,因为一旦掌握了它,您可能会感到惊喜。
* Font Awesome Icons WordPress 插件可从 https://github.com/rachelbaker/ 获得
维维克·纳斯
在我的博客中,我使用的是 Wp Exclusive Icon fonts plugin http://wordpress.org/extend/plugins/wp-elusive-iconfont/
优点是它有更多的自定义选项,比如改变颜色、大小、方向等,还有很多其他的图标。 检查它。
拉杰什·纳姆塞
感谢 Vivek 与我们的读者分享这个 WordPress 插件。
詹姆斯·德雷森
嘿 Vivek,感谢分享插件,我正在寻找这样的东西。 我也会尝试使用 Font Awesome Icons 来看看哪个适合我。 好文章拉杰什,请继续保持! 祝你好运。
拉杰什·纳姆塞
也可以尝试使用 Font Awesome WordPress 插件 :)
安迪
嗨,我只是在寻找这样的东西,因为我懒得创建所有这些类并将样式和图像添加到主题中。 谢谢!!
维品
感谢 Vivek 和 Rajesh,他们都提供了我正在寻找的信息。
罗希特乔加莱
嗨,拉杰什
'告诉我我们可以在 php 中在线播放视频吗,如果是,然后告诉我如何..
拉杰什·纳姆塞
您可以尝试使用 HTML 5 视频标签 :) 并且很容易将 HTML 5 与 PHP 一起使用 :)
Vaibhav的
我坚决地将此插件添加到我的 wordpress acc..
谢谢管理员..!
阿南德·希蒂纳利
好吧,我不是一个多言的人,所以这个插件对我真的很有帮助。 感谢分享这个插件。
Lily
这个东西有插件吗? 哇,第一次听到真棒。 感谢您分享这个。
莫辛·阿里
非常有趣的插件 Rajesh 你从哪里得到这些独特的想法。
大卫·克罗夫特
你好,
感谢这个不错的博客,因为这个“图标字体”主题对我来说很新,所以我可以在你的博客中了解很多新事物和新词。
字体生成器确实是目前可用的最好的免费图标字体。 所以它非常有用。
大卫·约翰逊
仅供参考,您使用了术语“Font Awesome 生成器”,但您的文章涵盖了 Font Awesome 本身,而不是生成器。 “生成器”一词在图标字体的上下文中具有特定含义。 支持 Font Awesome 的图标字体生成器示例包括 icnfnt 和 Fontello。
拉杰什·纳姆塞
好的,我们已经更新了文章标题,谢谢。
卡尔顿
您忽略了图标字体的一个重大缺点:它们不会优雅地降级。 所有禁用字体下载的用户(因为他们要么有安全意识,要么曾经有安全意识但忘记了,或者由其他有安全意识但不知道的人配置)只会看到丑陋的空字形符号。 要成为负责任的图标字体用户,您必须接受将这些用户扔在公共汽车下。
阿尤什·阿格拉瓦尔
这篇文章似乎有点旧,但我想说使用 font awesome 的一个好方法是使用它的 CDN ://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
帮助希望减少加载时间的博主。
维卡斯
好帖子,Font Awesome 是设计界最好的发展之一。
马克福克斯
感谢分享。 我现在更倾向于使用它。
高拉夫·杜特
男人! 2013 年,我以前怎么可能没见过这个,但对我来说仍然完美无缺。 谢谢你。