阿里妈妈字体图标的使用（无色+有色）

步骤：

进入iconfont-阿里巴巴矢量图标库
将图标添加至购物车
点击购物车，添加至项目
下载到本地
引用iconfont.css
打开demo_index.html文件查看引入图标的类名
复制类名

使用无色的字体图标

<!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"><link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css"><title>Document</title>
</head><body><!-- <span class="iconfont 图标的类名"></span> --><span class="iconfont icon-jingyingjihua"></span>
</body></html>

图标太小，可以自定义其他类名修改样式

使用有色的字体图标

在无色图标基础上，引入js文件

<!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"><link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css"><script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script><title>Document</title><style></style>
</head><body><!-- <span class="iconfont 图标的类名"></span> --><span class="iconfont icon-jingyingjihua"></span>
</body></html>

设置固定样式（必写）

<!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"><link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css"><script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script><title>Document</title><style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head><body><!-- <span class="iconfont 图标的类名"></span> --><span class="iconfont icon-jingyingjihua"></span>
</body></html>

使用svg标签，在href=“# 字体图标的类名”

<!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"><link rel="stylesheet" href="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.css"><script src="C:/Users/LianYu\Desktop/前端/font_bzxvxu65ls6/iconfont.js"></script><title>Document</title><style>.small {font-size: 12px;}.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head><body><!-- <span class="iconfont 图标的类名"></span> --><!-- <span class="iconfont icon-jingyingjihua"></span> --><svg class="icon small" aria-hidden="true"><use xlink:href="#icon-jingyingjihua"></use></svg>
</body></html>

阿里妈妈字体图标的使用（无色+有色）相关推荐

来一个阿里妈妈字体图标的简单说明书吧
随着前端技术的飞速发展,涌现了很多新的技术.而且我们在用户体验的路上也是一直在孜孜不倦的探索着.为了提高页面的加载速度,渲染速度.提高用户的体验做出了很多努力. 可是最近发现很多前端开发者还是不会是用 ...
关于阿里妈妈字体图标
什么是icon fonts 这个实在不知道怎么描述,我的理解就是利用字体工具把Web上平时使用的图标(icons)转换成icon fonts;它可以借助CSS中的@font-face嵌入网页中,用于显 ...
阿里妈妈字体图标（iconfont）使用介绍
提起字体图标,大家首先想到的可能是 Font Awesome, 但由于Font Awesome图标数量太多,多达近千个,但往往我们的项目中只用到其中的几个,这使得Font Awesome对我们来说显得 ...
阿里妈妈字体图标Iconfont的使用方法
使用字体图标的目的:使用字体图标技巧实现网页中简洁的图标效果字体图标 Ø 字体图标展示的是图标,本质是字体. Ø 处理简单的.颜色单一的图片 Iconfont官网地址 :Iconfont官网地址 ...
使用阿里妈妈字体图标库，ie10报错，无法获取未定义或 null 引用的属性“firstChild”
前因:公司优化页面,要把彩色图片,换成字体图标. 结果:更换完后,测试发现ie10,ie9都会报错,但demo测试是没有问题的. 测试:console.log(target)为null,找到docum ...
阿里妈妈矢量图标使用
1.登陆 http://www.iconfont.cn/ 阿里妈妈矢量图标库 2.登陆,可以使用GitHub账号或者其他账号登陆 3.选择将要使用的主题图标,或者在搜索栏里面搜索需要的图标 4.将需要 ...
vue引入阿里妈妈的图标
首先你需要一个团队,然后加入进去,这时候你就可以找到自己项目需要用的的图标,然后加入购物车,直接点击下载代码,然后解压, 然后把这个文件放到你的项目里边,我是vue,所以放到了pubulc下, jso ...
如何使用阿里云字体图标教程
为什么要使用? 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的.更重要的是图片不能很好的进行&q ...
Qt 使用阿里云字体图标
阿里云图标下载选择下载svg ( 当然你可以选择下载png , 然后按照 qt正常设置图片的方法 , 经过测试 , 还是应该选择这种方法) 2. 详解使用icomoon生成字体图标的方法并应用 ht ...

阿里妈妈字体图标的使用（无色+有色）

使用无色的字体图标

使用有色的字体图标

阿里妈妈字体图标的使用（无色+有色）相关推荐

最新文章

热门文章