黑马程序员技术交流社区

标题: Web前端培训：如何使用Iconfont实现字体图标? [打印本页]

作者: 庭院深深深几许 时间: 2019-4-19 14:57
标题: Web前端培训：如何使用Iconfont实现字体图标?
首先,我们先看了解一下什么是 IconFont：
IconFont 就是字体图标。严格地说，就是一种字体，但是，这种字体不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。
接着,我们来看下网站中哪些地方是用了字体图标的：

IconFont 的产生的背景：
我们都知道，在网页制作中，会经常用到不同的字体，常用的有微软雅黑、宋体、Aria 等等。在我们写css的样式的时候，通过 font-family 可以指定元素的字体名称，我们称这类字体为 WebFont。但是传统的web开发人员的字体选择是有限的。只有少数几种字体可以保证在所有公共系统中都可以使用——这就是所谓的 Web-safe 字体。
IconFont 的使用原理: 来自于 css 的 @font-face 属性。这个属性用来定义一个新的字体，基本用法如下：

@font-face {
font-family: ;
src: [],[ []], *;
[font-weight: ];
[font-style:

　　传智的web前端培训课程一直紧随市场发展脚步，实时更新前沿、深度、覆盖面广的前端课程。
　　传智全新升级的前端与移动开发课程新增了大热的小程序+小游戏、人脸识别、机器学习、大数据可视化等前沿技术，还加入了前所未有的全终端大型项目，让学员通过一个大型项目掌握从需求到开发再到上线部署的各项技能，为学员高薪就业增加砝码。
　　更多的相关web前端培训课程请访问：http://www.itcast.cn/web/

20190122153415542.jpg (30.73 KB, 下载次数: 31)

20190122153741060.jpg (33.52 KB, 下载次数: 41)

20190122153754260.jpg (52.83 KB, 下载次数: 32)

20190122153802324.jpg (34.18 KB, 下载次数: 35)

20190122153816154.jpg (29.08 KB, 下载次数: 31)

20190122153824235.jpg (29.48 KB, 下载次数: 34)

20190122153844524.jpg (76.54 KB, 下载次数: 26)

20190122153902816.jpg (58.21 KB, 下载次数: 35)

20190122154759599.jpg (82.15 KB, 下载次数: 38)

20190122154855474.jpg (82.43 KB, 下载次数: 28)

20190122155443852.jpg (48.47 KB, 下载次数: 30)

20190122155454009.jpg (83.47 KB, 下载次数: 34)

20190122155503871.jpg (83.41 KB, 下载次数: 35)

20190122155515300.jpg (65.43 KB, 下载次数: 31)

20190122155833673.jpg (101.24 KB, 下载次数: 38)

20190122155930640.jpg (55.81 KB, 下载次数: 29)

20190122155945471.jpg (87.42 KB, 下载次数: 40)

20190122160252805.jpg (98.48 KB, 下载次数: 33)

20190122160320940.jpg (96.09 KB, 下载次数: 28)

20190122160341275.jpg (83 KB, 下载次数: 37)

20190122162140825.jpg (31.48 KB, 下载次数: 34)

20190122162243980.jpg (41.23 KB, 下载次数: 27)

20190122162316396.jpg (59.69 KB, 下载次数: 30)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2