首页 > 代码库 > 使用Font Awesome替换你的网站图标
使用Font Awesome替换你的网站图标
http://fortawesome.github.io/Font-Awesome/whats-new/
使用Font Awesome替换你的网站图标
Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作。丢掉图片图标吧,跟我一起来用Font Awesome。
Font Awesome 特性:
1、一个字体文件, 249 个图标。
2、用CSS控制样式。
3、无限缩放。
4、个人、商业均可自由使用。
5、支持IE7+。
6、在Retina屏幕上也能完美呈现。
7、设计师的助手。
8、兼容屏幕阅读器。
Font Awesome的使用:
1、先下载Font Awesome字体样式文件和字体。CSS样式文件下载清点这里,字体下载请点这里
2、将下载的字体和CSS样式文件拷贝到你的项目目录中去。
3、随便选择一个CSS样式文件,你可以选择font-awesome.less或者font-awesome.min.css作为你的图标样式文件。
4、打开你所选择的样式文件,编辑样式文件中的字体路径,当然这个路径是针对你css样式文件位置来确定的。
5、在你的项目中引用样式文件即可。
例如:
1 | <link rel="stylesheet" href="../css/font-awesome.min.css"> |
or
1 | <link rel="stylesheet" href="../css/font-awesome.css"> |
如需兼容IE浏览器,那请下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。
1 2 3 | <!--[if IE 7]> <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css"> <![endif]--> |
- 6、在你需要使用这些图标的地方加上一个html标签,给该标签一个class属性,属性值请参阅 Font Awesome图片集
例如:
当然,这些样式你可以自己定义的,但是为了兼容性,最好还是使用原版的吧!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。