-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-10-31
来源 ：
阅读 1350
评论 0
摘要：本篇教程介绍了HTML+CSS入门 强大而灵活的字体图标替代库iconfont，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 强大而灵活的字体图标替代库iconfont，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
前言概述
在开发网页制作过程中通常需要一些网页小图标，前端需要PS切图，将单个小图标icon组合成CSS雪碧图过程中，需要一些时间和精力;
如果网页制作中需要的小图标icon有一套css框架库集成起来将大大提高开发效率于是就有了接下来要说的字体图标库fontAwesome、iconfont
fontAwesome 图标字体库与CSS框架
fontAwesome 官网//fontawesome.dashgame.com目前Font Awesome最新版本version是4.7.0
在网页中引入压缩文件font-awesome.min.css即可<link rel="stylesheet" href="css/font-awesome.min.css" />
实现如下导航菜单图标
<i class="fa fa-home fa-fw"> fa设置字体库图标大小、fa-fw设置图标宽度、fa-*(fa-home)中 *是名词;表示是图标名称
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FontAwesome字体库图标</title>
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
</body>
</html>
fontAwesome缺点
1.若网页中就只使用若干个图标;就得将整个文件fontAwesome库下载下来;
2.fontAwesome图标库可能没有我们想要图标
设想一下 如果通过一个库，将自己网页中需要的小图标加入购物车，生成对应的字体库文件，这将是极其强大灵活的——iconfont
强大而灵活的 iconfont 替代fontAwesome
iconfont 官网 //www.iconfont.cn iconfont可以将我们需要的图标加入购物车，生成对应字体图标库
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
