Font Awesome 完美的图标字体 只为Bootstrap设计

发布时间:2022-10-29 12:40:49 作者:Dave Gandy 来源:Bootstrap中文网 浏览量(1816) 点赞(698)
摘要:一个字体文件, 249 个图标一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。用CSS控制样式用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。无限缩放矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。个人、商业均可自由使用Font Awesome是完全免费的,无论

一个字体文件, 249 个图标

一个字体文件包含了所有图标。Font Awesome 助你完整表达web页面上每个动作的含义。

用CSS控制样式

用CSS能非常容易的改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性。

无限缩放

矢量图意味着每个图标都能在所有大小的屏幕上完美呈现。

个人、商业均可自由使用

Font Awesome是完全免费的,无论个人还是商业使用。详见 协议。

支持IE7+

Font Awesome支持IE7及以上浏览器。不过你要是必须用在这种过时的浏览器上话,我只能表示同情!

在Retina屏幕上也能完美呈现

Font Awesome 中包含的都是矢量图标,在高分辨率的显示器上也能完美呈现。

专为Bootstrap设计

Font Awesome是完全从头设计的整套图标,完全和Bootstrap 2.2.2版本兼容.

设计师的助手

安装 FontAwesome.otf 字体文件,然后在这个页面直接拷贝粘贴图标字符的代码就可以用于你的设计中了。

兼容屏幕阅读器

Font Awesome 不会阻止屏幕阅读器,这和其他图标字体的行为方式完全不同。

适合 Web 应用的图标

1.png

文本编辑器图标

2.png

指示方向的图标

3.png

视频播放器图标

4.png

SNS图标

5.png

医疗图标

6.png

集成
将Font Awesome 集成到 Bootstrap 非常容易,还可以被单独使用。

最简单的 Bootstrap + Font Awesome 集成方式


  1. 拷贝 Font Awesome 字体目录到你的项目中。

  2. font-awesome.min.css 文件到你的项目中。

  3. 打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。

     字体路径是相对于你的 CSS 目录的。

  4. 在html文档中的 <head> 部分,引入 font-awesome.min.css 文件。

<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

  5.在浏览器中打开页面,检查是否正确启用了 Font Awesome!


自定义 Bootstrap + Font Awesome LESS文件的方式进行集成


  1. 拷贝 Font Awesome 字体目录到你的项目中。

  2. 拷贝 font-awesome.less 文件到 bootstrap/less 目录。

  3. 打开 bootstrap.less 文件,并将 @import "sprites.less"; 替换为 @import "font-awesome.less";

  4. 打开你的项目中的 font-awesome.less 文件,并编辑 @FontAwesomePath 变量,将其值替换为指向字体文件的正确路径。

    @FontAwesomePath:   "../font";

     字体路径相对于存放编译之后的CSS文件的目录。

  5. 重新编译Bootstrap的所有 LESS 文件。如果你使用的是less.js脚本动态编译的话就能直接在浏览器中看到效果了。

  6. 在浏览器中打开页面,检查是否正确启用了 Font Awesome!

Font Awesome 3.2.1 下载Font-Awesome-3.2.1.zip


二维码

扫一扫,关注我们

声明:本文由【达扬网络】编辑上传发布,转载此文章须经作者同意,并请附上出处【达扬网络】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

发表评论:

评论记录:

未查询到任何数据!

现在,非常期待与您的一次邂逅

青海达扬网络传媒有限责任公司努力让每一次邂逅总能超越期待!

您身边的【数字化信息服务专家】

搜索千万次不如咨询1次

主营项目:网站建设,小程序开发,软件开发,网络安全维护,app开发,数字信息化解决方案等

立即咨询 0971-6275815
在线客服
嘿,我来帮您!