如何在网页中使用iconfont图标

在页面中使用iconfont小图标

教程：

1.登录iconfont官网站
2.点击图标库->官方图标库
3.选择所需要的图标添加入库，右上角查看添加进来的图标，然后添加至项目，点击确定。

4.下载至本地

5.解压缩该包后，将文件夹中后缀为ttf、woff、woff2的文件复制到项目的src->assets->styles->新建一个文件夹命名为iconfont里面.

6.再把iconfont.css文件复制到刚刚的styles文件夹中
（若styles不存在则自行创建）

7.Vscode中打开iconfont.css文件修改信息：
主要是添加./iconfont/…

8.在main.js中添加 import ‘./assets/styles/iconfont.css’

import './assets/styles/iconfont.css'

9.添加完成后即可在代码中使用：
<span class=”iconfont”>(此处添加对应图标的对应代码)</span>
例如：对应代码为复制的iconfont对应代码
<span class="iconfont" ></span>

10.到此已经完成了，后续需要添加新的图标，添加到库之后是需要重新下载到本地哦~

网页中使用iconfont图标相关推荐

用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
在网页中画ICON图标
相信很多前端开发人员都做过导航栏图标,其实很多网站的导航栏图标使用的技术无外乎两种,CSS Sprite雪碧图和字体图标.下面就带大家一起熟悉一下这两种在网页中画ICON图标的方式. 一.使用CSS ...
在网页中制作icon图标
用字体在网页中画icon图标第一步:获取字体资源 IconMoon网站 https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮 ...
如何在Axure中使用Iconfont图标字体
需求背景在原型设计中,图标是我们使用率非常高的元素,通常我们会选择将图标导出为图片放到Axure里使用,或者使用Axure的图标元件库,但是他们使用起来会有很多不方便的地方: 图片进行缩放会失真,无 ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
uniapp项目中引入iconfont图标
在项目中,难免出现图标不满足我们需求的情况,我们可以去阿里图标库(iconfont-阿里巴巴矢量图标库)选择我们满意的图标. 最近在做uniapp的项目,记录一下引入iconfont的步骤 1.去官网 ...
如何在网页中使用阿里图标iconfont（2022最新版详细）
阿里图标iconfont使用下载文件使用文件下载文件点击链接进入阿里iconfont官网,用手机号注册并登录. 选择资源管理->我的项目选择右边的紫色图标新建项目,填写项目名,其他的默 ...
在网页中使用矢量图标
做网页时常常需要用到一些标志性的小图标可以通过放置小图标的图片来实现,但也可以通过使用矢量图标来做,使用矢量图标的好处是,可以在放大时保持清晰度. 做法这里以阿里巴巴矢量图标库为例,打开网址www ...

网页中使用iconfont图标

如何在网页中使用iconfont图标

教程：

网页中使用iconfont图标相关推荐

最新文章

热门文章