iconfont的使用(详细介绍)

简介: iconfont的使用(详细介绍)

今天看iconfont的使用视频,有点断片,记得基础班没有讲过,可能是资源丢掉了,总结一下使用过程。


下面是网站地址


https://www.iconfont.cn/


使用需要登录账号,可以使用github或者微博账号登录,在右上角第一个小图标。


1.png


2. 选择自己需要的图标,先随便选中一个进行演示。(引入下面的资源)


2.png


点进去之后,鼠标移动上去,点击购物车图标


3.png


这样子的话,右上角的购物车里面就会显示出数量


4.png


3. 选择完毕之后,就点击一下小购物车


5.png


选择添加到项目(第一次使用的话需要新建一个项目,根据自己的需求制作就可以)


6.png


点击之后就会跳转到下面网页


7.png


4. 选择下载至本地,之后进行解压处理。


8.png9.png


新建一个文件夹,将解压好的文件夹放入进去,之后新建的文件夹用哪个vscode打开。


10.png


5. 同级建一个.html文件


11.png


引入.css文件


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

12.png


写图标类名:复制代码


13.png


写入类名(第一个必须是.iconfont 第二个是自己选的图标)


14.png


测试


15.png


演示2


16.png

17.png

补充:修改颜色+大小


18.png19.png

相关文章
|
7月前
v-for iconfont
v-for iconfont
38 0
|
前端开发
iconfont字体图标的使用方法
iconfont字体图标的使用方法
|
C# 容器 Android开发
WPF字体图标——IconFont
原文:WPF字体图标——IconFont 版权声明:本文为【CSDN博主:松一160】原创文章,未经允许不得转载。 https://blog.csdn.net/songyi160/article/details/54894233 一、字体图标概述 ①字体图标其实就是把矢量图形打包到字体文件里,以后就可以像使用一般外置字体一样的使用它,因此Winform、WPF中都是可以用的。
2521 0
css3 hover效果
css3 hover效果
66 0
|
前端开发
CSS八种让人眼前一亮的HOVER效果
CSS八种让人眼前一亮的HOVER效果
CSS八种让人眼前一亮的HOVER效果
|
存储 JavaScript
ICONFONT字体图标库使用
ICONFONT字体图标库使用
345 0
|
前端开发
八种让人眼前一亮的CSS HOVER效果~
八种让人眼前一亮的CSS HOVER效果~
八种让人眼前一亮的CSS HOVER效果~
|
Web App开发 编解码 前端开发
有趣的 SVG、Favicon
favicons是在浏览器选项卡中看到的小图标,当浏览浏览器的书签和标签时,它们可以帮助用户清晰的知道是哪个网站。它们是互联网历史的一部分,能够实现一些很酷的效果。
270 0
有趣的 SVG、Favicon
|
前端开发
CSS - Iconfont
CSS - Iconfont
269 0
CSS - Iconfont
|
前端开发
Vue3中使用各类字体图标的正确姿势:本地SVG、Iconfont、FontAwesome、ElementPlus(图标选择器篇)
最近,在项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Icon 之后,理应还有一个图标选择器,可以加载出不同图标库的所有可用图标,方便直接选择使用,完整代码在文末提供。
735 0