图标字体(iconfont)
-在网页中经常需要使用一些图标,可以通过图片来引入图标,但图片本身比较大,也不灵活
-所以使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入
-这样我们就可以通过使用字体的形式来使用图标
图标库有很多,目前国内使用比较多的就是阿里巴巴图标矢量库,网址:/
以后学习框架的时候,会知道框架里面也有很多的图标,可以直接使用,不过没有阿里巴巴图标多,好看。
下面介绍阿里巴巴图标库的使用
第一步:注册阿里巴巴图标库的账号,搜索自己想要的图标
第二步,将选中的图标加入到购物车内
第三步:去购物车里,将图标放入到你正在做的项目里
第四步:在项目中,可以选择下载本地文件或者复制在线网址,下面介绍怎么使用图标
代码演示图标三种使用方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入线下版本 下载下来,如果没有网也是可以生效的 --><link rel="stylesheet" href="./阿里字体库/iconfont.css" /><!-- 引入线上版本 跟上面的线下版本引入一个就可以了--><!-- <link rel="stylesheet" href="/t/font_3284033_acdfm5jydfd.css" /> --><style>p::before {content: "\e60f";font-family: "iconfont";}</style></head><body><!-- 第一种方式 --><span class="iconfont"></span><span class="iconfont"></span><!-- 第二种方式 --><i class="iconfont icon-jishuzhuanyi"></i><i class="iconfont icon-zhijiao-copy-copy3"></i><!--第三种方式 --><p>一朵花</p></body></html>