css中的代码图标,认识CSS中字体图标(示例代码)

前端之HTML，CSS(十一)

字体图标

使用文字做出小图标的效果并超越了小图标应用精灵图，使得图标变得灵活，减少了请求次数，优化了界面的性能。字体图标本身为矢量图。

字体图标的使用过程

1.UI设计字体图标效果图

使用illustrator或者Sketch矢量图软件创建icon图标，并保存svg格式。

2.前端上传生成兼容性字体文件包

将svg格式文件转换成页面能够使用的字体文件，并且需要兼容各种浏览器。

3.前端下载兼容字体文件包至本地

icomoon字库简单使用教程

1.打开icomoon字库页面以后，点击IconMoon APP

2.点击IcoMoon APP 以后，选择自己想要的图标，可以多项选择。

3.选择好图标以后，找到页面右下角处的Generate Font生成字体

4.点击Generate Font以后，页面跳转后，右下角处变为Dowmload

5.点击Download下载，下载完成以后，找到下载后的文件夹。

4.字体文件包引入HTML页面

1.解压下载好的文件夹。

2.打开icomoon文件夹，找到fonts文件夹

3.复制fonts文件夹到自己的项目文件中

4.页面中声明并调用字体图标

1 @font-face {2 font-family: "icomoon";3 src: url(‘fonts/icomoon.eot?7kkyc2‘);4 src: url(‘fonts/icomoon.eot?7kkyc2#iefix‘) format(‘embedded-opentype‘),5 url(‘fonts/icomoon.ttf?7kkyc2‘) format(‘truetype‘),6 url(‘fonts/icomoon.woff?7kkyc2‘) format(‘woff‘),7 url(‘fonts/icomoon.svg?7kkyc2#icomoon‘) format(‘svg‘);8 font-style: normal;9 }10 span {11 font-family: "icomoon";12 }

View Code

5.找到解压后文件夹icomoon中的demo.html

6.浏览器打开，复制所用字体图标后的小方块

7.将复制的小方块粘贴在页面所需位置

8.保存，浏览器打开页面

字体图标-测试

7 @font-face{ /*声明字体引用字体*/

8 font-family:"icomoon"; /*可以自定义*/

9 src:url(‘fonts/icomoon.eot?7kkyc2‘);

10 src:url(‘fonts/icomoon.eot?7kkyc2#iefix‘) format(‘embedded-opentype‘),11 url(‘fonts/icomoon.ttf?7kkyc2‘) format(‘truetype‘),12 url(‘fonts/icomoon.woff?7kkyc2‘) format(‘woff‘),13 url(‘fonts/icomoon.svg?7kkyc2#icomoon‘) format(‘svg‘);

14 font-style:normal; /*倾斜字体正常*/

15 }

16 span{

17 font-family:"icomoon"; /*与声明中font-family相同*/

18 font-size:100px; /*设置字体图标大小*/

19 color:red;

20 font-style:normal;

21 }

25 ?

View Code

css中的代码图标,认识CSS中字体图标(示例代码)相关推荐

CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
python3图片转代码_python3图片转换二进制存入mysql示例代码
python3图片转换二进制存入mysql示例代码发布于 2014-09-29 18:00:01 | 198 次阅读 | 评论: 0 | 来源: 网友投递 Python编程语言Python 是一种面 ...
CSS学习（3） - 轮廓文本和字体图标
文章首发于我的个人博客:欢迎大佬们来逛逛文章目录 CSS轮廓 CSS文本 CSS字体 CSS图标 font Awesome图标 Bootstrap 图标 CSS轮廓轮廓是在元素的周围绘制一条线,用 ...
css补充（1）：css实现小三角，精灵图，字体图标
文章目录一.css实现小三角 1.1 三角形实现二.精灵图的使用三.字体图标一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...
【CSS基础学习笔记】精灵图、字体图标、三角形、样式优化
精灵图 CSS精灵技术:能有效地减少服务器接收和发送请求的次数,提高页面的加载速度. 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了.(主要针对小的背景图片,因为 ...
java中if条件格式_Java 设置Excel条件格式示例代码(高亮条件值、应用
概述在Excel中,应用条件格式功能可以在很大程度上改进表格的设计和可读性,用户可以指定单个或者多个单元格区域应用一种或者多种条件格式.本篇文章,将通过Java程序示例介绍条件格式的设置方法,设置条 ...
php矢量图图标,矢量图（字体图标）
矢量图(即放大不失真) 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font-awesome/) 缺点:文件较大 ...
更新elementui图标不显示_elementUI字体图标不显示问题
自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误: GET http://localhost:9090/WEB-INF/content/2 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存
前一段时间在项目中引入阿里巴巴字体图标库的图标,按步骤走了一遍,但是一直不成功. 刚好需求改了,不需要用图标,就暂时搁浅没在管这个. 今天又有新的需求要用到字体图标,在ant-design-vue官方 ...

css中的代码图标,认识CSS中字体图标(示例代码)

css中的代码图标,认识CSS中字体图标(示例代码)相关推荐

最新文章

热门文章