【CSS】阿里iconfont的使用方法(另附font | 您所在的位置:网站首页 › 怎么用阿里妈妈赚钱 › 【CSS】阿里iconfont的使用方法(另附font |
最近学习CSS中研究了一下阿里妈妈出品的阿里iconfont图标的引入方法。网页的各种常用图标引入不愁啦~ 更多知识,欢迎访问我的个人博客:Nan-ying’s Blog 主要分为线上引用和本地引用(更稳定)。 一、线上引用不足:线上引用比较依赖阿里iconfont图标平台的稳定性 优势:方便,不需下载文件至本地,推荐日常练习时使用 1. 寻找图标 打开网站http://www.iconfont.cn/ 图标管理->我的项目->然后新建项目选择图标添加到购物车->购物车中选择加入项目,将图标加入项目打开项目此时可以看到我们将三个箭头图标添加进了项目中。 2. 引入图标 首先复制链接(点此复制代码) 然后在css中内插入,注意加上http: 此时需要在html结构中引用这些图标 可以看到,红框中为三个图标各自对应的类名 在引入时,分别引入这些类名即可 Document span { /* 图标颜色变为粉色 */ color: pink; }3. 更改图标 更改颜色:可直接在文件样式style中更改更改字体:需要复制.iconfont代码,在其中更改font-size获取.iconfont:点击红框处,在弹出页面找到.iconfont 二、本地引用 不足:没有线上引用方便 优势:稳定 1. 下载图标 打开网站http://www.iconfont.cn/ 图标管理->我的项目->然后新建项目选择图标添加到购物车->购物车中选择加入项目,将图标加入项目打开项目->下载到本地->放入本地项目的根目录下fonts为下载的图标文件夹 2. 引入图标 在文件中引入iconfont.css,fonts为图标文件夹名称 然后在html结构中引用这些图标,与线上引用类似 Document span { /* 图标颜色变为粉色 */ color: pink; } PS: 添加 font-family 和 content 的引入方法以上方法都是需要在元素中加入class属性。 在使用过程中,我发现了另一种引入方法:此方法不需要在元素中添加class属性,支持伪元素选择器添加图标 Document div::after { /* content中为下拉符 */ content: '\e69a'; /* 一定要添加font-family属性 */ font-family: 'iconfont'; } 更多推荐ps:content中的内容在此找 代码效果如下: 此方法常用于使用伪元素选择器(::before,::after)添加图标时(此时无法在html结构中引入iconfont等class类名) 更多知识,欢迎访问我的个人博客:Nan-ying’s Blog |
CopyRight 2018-2019 实验室设备网 版权所有 |