阿里妈妈的iconfont的引用问题
一、先进官网
我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢。
二、点击图标
嘿嘿,上面的操作步骤我就不多说了吧,我相信大家都会做的,接下来我们就来讲讲该如何去使用了,看下面的
三、使用方法
我们先来介绍官网的方法
第一种:
Unicode 引用
将下面一段代码拷贝到css里面
注意:这段代码必须引入自己的,不然图标用不了的。
并定义样式
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
再引入html
<span class="iconfont">3(这里引入的是你选择的图标);</span>
哈哈,就是上面这样的,懂了吧,接下来我们用第二种方法
第二种:
font-class 引用
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
点击 font class 后每个图标下面都会显示对应的class,直接替换上面的icon-xxx即可。
引入的css看下面
前面必须加上http:
好了,第二种方法就介绍完毕
第三种
第一步:引入项目下面生成的 symbol 代码:
老规矩前面必须加上http:
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
找到对应的图标替换掉icon-xxx就可以了
上面的三种官网方法我就介绍完毕了,再介绍下第四种方法
第四种
这种方法使用的是伪类选择器before或者是after;
在第一种方法的基础上来的
首先还是复制下面一段代码进css中
接下来我们就可以直接在元素中使用::before和::after了
我就不进行html举例了,就一个空的span标签来说吧。注意:有一两个标签是不支持伪类的,但是我想一般也是不太用的到的。
下面直接上css就可以了,我们还是使用的是Unicode方式来的,它是一个16进制方式
我们介绍的第一种方法里面的;直接去掉&#x,在前面加一个反斜线就可以了。
span::before{ content:"\e6f4" }
最后一种介绍完毕
四、总结
以上就是花了一段时间自己进行总结的,这个实际上没接触的话是不知道的,但是接触后就会觉得是非常的简单,希望在以后完成项目中能够更快速度的完成,并能在学习中学会更多的方法。
特别强调下@font-fance必须是自己添加进项目的图标,不然不能引用的
@ 按照下官网的解释:
Unicode 是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持 IE6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
阿里妈妈的iconfont的引用问题的更多相关文章
- 来自阿里妈妈的iconfont(转)
转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...
- iconfont阿里妈妈前端小图标使用方法详解
图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org
RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...
- 阿里妈妈MLR模型(论文)
论文来源:https://arxiv.org/abs/1704.05194v1 阿里技术:https://mp.weixin.qq.com/s/MtnHYmPVoDAid9SNHnlzUw?scene ...
- zz阿里妈妈深度树检索技术(TDM)及应用框架的探索实践
分享嘉宾:何杰 阿里妈妈 高级算法专家 编辑整理:孙锴 内容来源:DataFun AI Talk 出品社区:DataFun 注:欢迎转载,转载请注明出处 导读:阿里妈妈是阿里巴巴集团旗下数字营销的大中 ...
- 阿里妈妈Java后端 社招5面(Offer已拿)
最近由于个人原因, 由于前面两面的时间过去的有点久了,只能根据记忆大概写些记得问题. 阿里妈妈1面 40mins(2021-02-22) 1. 能简单介绍下自己和自己做的项目吗? 2. 关于项目的 ...
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
随机推荐
- python实例:从excel读取股票代码,爬取股票信息写到代码后面的单元格中
关键词:爬虫.python.request.接口.excel处理 思路: 1.首先准备好excel文档,把股票代码事先编辑进去. 2.脚本读取文档,依次读出股票代码到指定站点发起请求获取股票信息 3. ...
- Python学习,第七课 - 文件操作
Python中对文件的相关操作详解 文件的操作在今后的Python开发中也是使用非常频繁的. 先说下对文件操作的流程 打开文件,得到文件的一个句柄,赋值给一个变量 然后通过句柄对文件进行操作(内容的增 ...
- [CCPC2019 ONLINE]H Fishing Master
题意 http://acm.hdu.edu.cn/showproblem.php?pid=6709 思考 先考虑所有鱼的烹饪时间小于k的情况.将T从大到小排序后,煮一条鱼相当于将其时间补齐至k. 由于 ...
- mac系统安装、启动与关闭redis
一.下载 打开官网:https://redis.io/ Download---Stable---Download5.0.4,下载最新稳定版,看具体情况而定我这里是5.0.4版本. 二.安装 下载完成后 ...
- (转)KL散度的理解
KL散度(KL divergence) 全称:Kullback-Leibler Divergence. 用途:比较两个概率分布的接近程度.在统计应用中,我们经常需要用一个简单的,近似的概率分布 f * ...
- Visual Studio 常见问题
VS 2013相关问题 VS 2013 Ultimate Update 5 下载地址: 英文版: vs2013.5_ult_enu.iso SHA-1:918EA4A911858D32C9771480 ...
- Bayesian Non-Exhaustive Classification A case study:online name disambiguation using temporal record streams
一 摘要: name entity disambiguation:将对应多个人的记录进行分组,使得每个组的记录对应一个人. 现有的方法多为批处理方式,需要将所有的记录输入给算法. 现实环境需要1:以o ...
- CSS绝对定位absolute详解
转:https://www.jianshu.com/p/a3da5e27d22b 之前介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性.如果能理解 ...
- python 2 计算字符串 余弦相似度
def get_ord_list(str): return [ord(i) for i in str] def calcu_approx(str1,str2): def dot(A,B): retur ...
- 安装MinGW出现 mingw-get: *** ERROR *** Get package:
个人的解决方法: 1.手机开个热点让电脑连上. 2.在Setting里面讲proxy关闭.