iconfont字体图标库的使用

阿里巴巴矢量图库网址：https://www.iconfont.cn/
进入官网后选择自己想要的图标，鼠标放上去后点击购物车图标加入购物车：
然后点击右上角的购物车下载（下载是要登录的哦~）
下载素材是直接下载的图片，较简单。这里演示“下载代码”。

点击“下载代码”，会提示使用账号登录，然后会下载一个压缩包，解压。可以看到文件夹里有这些文件：

打开里面的demo_index.html页面
上面默认显示了刚才下载的小图标以及第一种方法的用法（一般情况下我们使用的小图标都是无色的，前两种方法就可；第三种方法适用于有颜色图标）

方法一（Unicode）：
1、将刚才下载的文件夹复制到我们的项目里来（我将下载的文件夹重命名为iconfont了）

2、新引进iconfont.css 文件

 <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>

3、在页面内添加个i标签（其他标签也可，只是为了用个内联元素包起来）
4、并且给i标签添加基类（基本的类名 .iconfont），为了方便设置图标的属性，我们最好为它再取一个类名，不要改变文件iconfont.css里的内容。
5、再复制网页中小图标对应的编码添加到i标签内即可

<!--通过Unicode-->
<i class="iconfont xiaotu">&#xe73d;</i>

效果如图所示：

下载代码的方便所在就是我们就可以对它进行改变，注意用自己去的类名设置哦！设置文本大小为40px，可以看到它变大了

<style type="text/css">.xiaotu{font-size: 40px;}
</style>

方法二（Font class）：
1.新引进iconfont.css 文件
2.在页面内添加个i标签
3.给i标签添加基类（基本的类名） .iconfont
4.在把小图标对应的class名字加到i标签内即可
在修改图标样式时，还是再取一个类名哦~

        <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/><style type="text/css">.red{color: red;}</style><!--通过font class--><i class="iconfont icon-xiaoxi  red"></i>

我们给图标设置的颜色为红色，它就变色啦！

方法三（Symbol）：
1、引入项目下面生成的 symbol 代码：

<script src="./iconfont/iconfont.js"></script>

2、加入通用 CSS 代码（引入一次就行）；
3、挑选相应图标并获取类名,再把小图标对应的#icon-XXX名字加到use标签内即可。

<style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xihuan"></use></svg>

今天就分享到这里了，加油o~

iconfont字体图标库的使用相关推荐

【Vue-Element】矢量字体库iconfont字体图标库使用
矢量字体库iconfont字体图标库使用 1.注册并登录 2.图标管理 >> 我的项目 >> 新建项目 3.新建完成后,搜索我们想要的图标,然后添加到购物车 4.添加完成后,购 ...
超全超靠谱的 iconfont 字体图标库维护与使用
字体图标库的使用这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量 ...
三分钟教会你自制 iconFont 字体图标库
app开发的时候,我们大多会用到字体icon,下面我们就讲解一下,如何自定义生成 iconFont 一般情况,我们优先选择在 Iconfont-阿里巴巴矢量图标库下载我们需要的矢量icon的svg格 ...
angular7项目中使用Iconfont字体图标库
iconfont官网 https://www.iconfont.cn 选择字体图标首先进入iconfont官网,然后使用github账号登录,搜索自己需要的图标,添加至购物车,然后添加之我的项目,点 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法
原标题:Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理 ...
【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...

iconfont字体图标库的使用

iconfont字体图标库的使用相关推荐

最新文章

热门文章