一、先进官网

我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢。

二、点击图标

嘿嘿,上面的操作步骤我就不多说了吧,我相信大家都会做的,接下来我们就来讲讲该如何去使用了,看下面的

三、使用方法

我们先来介绍官网的方法

第一种:

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">&#x33(这里引入的是你选择的图标);</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进制方式

我们介绍的第一种方法里面的&#xe6f4;直接去掉&#x,在前面加一个反斜线就可以了。

span::before{

   content:"\e6f4"

}

最后一种介绍完毕

四、总结

     以上就是花了一段时间自己进行总结的,这个实际上没接触的话是不知道的,但是接触后就会觉得是非常的简单,希望在以后完成项目中能够更快速度的完成,并能在学习中学会更多的方法。

特别强调下@font-fance必须是自己添加进项目的图标,不然不能引用的

@   按照下官网的解释:

Unicode 是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

阿里妈妈的iconfont的引用问题的更多相关文章

  1. 来自阿里妈妈的iconfont(转)

    转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...

  2. iconfont阿里妈妈前端小图标使用方法详解

    图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...

  3. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  4. 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org

    RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...

  5. 阿里妈妈MLR模型(论文)

    论文来源:https://arxiv.org/abs/1704.05194v1 阿里技术:https://mp.weixin.qq.com/s/MtnHYmPVoDAid9SNHnlzUw?scene ...

  6. zz阿里妈妈深度树检索技术(TDM)及应用框架的探索实践

    分享嘉宾:何杰 阿里妈妈 高级算法专家 编辑整理:孙锴 内容来源:DataFun AI Talk 出品社区:DataFun 注:欢迎转载,转载请注明出处 导读:阿里妈妈是阿里巴巴集团旗下数字营销的大中 ...

  7. 阿里妈妈Java后端 社招5面(Offer已拿)

    最近由于个人原因, 由于前面两面的时间过去的有点久了,只能根据记忆大概写些记得问题.   阿里妈妈1面 40mins(2021-02-22) 1. 能简单介绍下自己和自己做的项目吗? 2. 关于项目的 ...

  8. 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  9. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

随机推荐

  1. K8S生产环境中实践高可靠的配置和技巧都有哪些?

    K8S环境中实践高可靠的配置和技巧都有哪些? 磁盘类型及大小 磁盘类型: 推荐使用ssd 磁盘 对于worker节点,创建集群时推荐使用挂载数据盘.这个盘是专门给/var/lib/docker 存放本 ...

  2. Day9-Python3基础-多线程、多进程

    1.进程.与线程区别 2.python GIL全局解释器锁 3.线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Que ...

  3. chrome 安装

    Centos7 yum安装chrome浏览器   跟着这个教程安装的:Centos7安装chrome浏览器 (点击) 1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 goo ...

  4. javascript的对象、类和方法

    1.类和对象的概念: 1.所有的事物都是一个对象,而类就是具有相同属性和行为方法的事物的集合 2.在JavaScript中建立对象的目的就是将所有的具有相同属性的行为的代码整合到一起,方便使用者的管理 ...

  5. sublime sftp插件安装及时更新网站

    Sublime Text 2 本身并不强大,但是它方便使用插件扩展功能,所以变得很强大.今天介绍一个很实用的插件 SFTP ,可以大大提高前端工作效率. 常见的工作流程 有时候修改一些网站上的文件,通 ...

  6. vue2.x中使用计算属性巧妙的实现多选框的“全选”

    接下来我会以一个购物车的例子,来演示如果借助计算属性,精巧的实现多选框的全选功能.当然,有全选,自然对应的也还有取消全选. 以下这张gif图,就是最终的实现效果: 第一步,针对购物车每一个商品进行设置 ...

  7. 通过指针突破C++类的访问权限

    看如下代码 #include "pch.h" #include <iostream> using namespace std; class A { public: A( ...

  8. 搭建django项目连接mysql数据库环境

    开通博客园这么久,即将写下第一篇博客,十分兴奋.首先了,庆祝自己写下了码农生涯博客园第一篇博客,其次了,庆祝自己经过了10个小时奋战,终于成功搭建django项目连接mysql数据库的环境.在此过程中 ...

  9. Cheat sheet PySpark SQL Python(PySpark 速查表)

  10. DG参数 LOG_ARCHIVE_DEST_n

    DG参数 LOG_ARCHIVE_DEST_n This chapter provides reference information for the attributes of the LOG_AR ...