iconfont图标引入

字体图标

字体图标库使用webFont原理，加载一个图标就像加载一个字体一样，通过控制字体大小、字体颜色来控制图标的大小与颜色。
目前比较流行的开源字体图标库有
- iconfont http://www.iconfont.cn/
- font-awesome http://fontawesome.dashgame.com/

iconfont使用步骤

打开iconfont网站 https://www.iconfont.cn/
搜索要使用的图标
将喜欢的图标加入到购物车，前提是需要登录iconfont
打开购物车，点击“下载代码”
下载后，将对应的文件夹放到项目目录下

在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

/* 在<head>标签内引入 */
<link rel="stylesheet" href="./font_jcx62njyfg/iconfont.css">/* 在<body>标签内使用 */
/* xxx在文件夹下的iconfont.css页面中，复制过来就可以了 */
<i class="iconfont icon-xxx"></i>

iconfont多色图标使用步骤

搜索或选择多色图标
选择合适的图标加入购物车
打开购物车，点击“添加至项目”，没有项目创建即可
在项目中选择symbol，生成线上链接或下载到本地

引用线上js地址，直接使用script标签引入即可；下载到本地，引入iconfont.js到项目中即可

/* 在<head>标签中加入以下代码 */
<style>/* 加入通用css代码（引入一次就行） */.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>/* 线上引入 */
/* 记得在前面加上http或https，不知道用哪个可以都试一下 */
<script src="http://at.alicdn.com/t/font_2723033_a8d3feqyo3r.js"></script>/* 本地引入 */
<script src="./font_2723033_472uiy994m2/iconfont.js"></script>/* 在<body>标签内使用 */
/* xxx在上图页面把鼠标移入图标进行复制 */
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

iconfont图标引入相关推荐

iconfont图标引入方法
iconfont图标引入方法图标库链接阿里巴巴矢量图标库链接: [https://www.iconfont.cn/](https://www.iconfont.cn/). 使用方式引入方式添加 ...
iconfont图标引入及线上使用流程（无需下载图标到本地）
1.选择图标加购物车进入阿里巴巴矢量图标库https://www.iconfont.cn/ 输入图标名称,搜索图标找到想要的图标,加入购物车 2.打开购物车,添加至项目打开购物车,点击添加至项目 ...
vantUI 自定义引入iconfont图标（3种风格）- 案例篇
文章目录 vantUI 自定义引入iconfont图标(3种方法:含案例截图) 效果图 · 对比: 重要代码`(3种代码格式)`: 全局引入 · 代码: 项目文档 · 目录结构本地document文 ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
前言为什么要使用阿里图标库: 图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
vue项目引入彩色iconfont图标
做项目的时候经常会使用到iconfont图标库,在项目开始的时候提前想好需要什么图标,最好是多下载几个可替换的同类型图标,宁滥勿缺(别问,问就是得到了教训),无色的还是彩色的,这点很重要. 首先了解一 ...
微信小程序如何正确引入iconfont图标
最近在微信小程序踩坑啦,开始愉快了像web项目一样引入iconfont图标,结果发现: 然后?? 对,这个讨厌的小方块,显示失败啦最好一番百度后,成功解决啦,哈哈哈因为,小程序必须先转为base6 ...

iconfont图标引入

字体图标

iconfont使用步骤

iconfont多色图标使用步骤

iconfont图标引入相关推荐

最新文章

热门文章