阿里妈妈的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">&#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+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

原文地址:https://www.cnblogs.com/dy105525/p/12305350.html

时间: 2024-10-07 19:09:46

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

来自阿里妈妈的iconfont(转)

转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大,我在写上一篇文章的时候还是51794个,现在刷新之后图标数量已经是52090个了.如果这么大的一个库里面仍然没有你需要的图标的话,你也可以自己动手制作你自己的图标然后使用网站的在线生成工具来生成字体文件,分分钟就可以使用了. 除了拥有巨大的图标库之外,iconfont最值得推荐的原因还在于她使用上

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

图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3.样式表里面引入以下内容(../font 这个是根据相对路径做出相应的选择) @font-face {font-family: 'iconfont';     src: url('../font/iconfont.eot'); /* IE9*/     src: url('../font/iconfo

(转载)屏蔽浏览器的百度、阿里妈妈推广等广告

电脑--开始—“运行”中输入c:\windows\system32\drivers\etc (或:打开C盘 找到路径 C:\WINDOWS\system32\drivers\etc\ ) 点:”hosts”文件右键用记事本打开,最后空白处输入:    [括号内为解释,勿添] 127.0.0.1 p.tanx.com   (去除阿里妈妈) 127.0.0.1 cpro.baidustatic.com    (去除百度推广) 保存即可,删除百度联盟和阿里妈妈推广 绝对有效! 内容参考: http:/

阿里妈妈MaxCompute架构演进_-_AON(MPI)集群

原文链接 摘要: 1.1   MPI集群 1.1.1   背景 我们的集群规模不断地在加大, 17财年时我们的机器规模预估1.5W台 与此同时我们却有着不同的感受,明显感觉到了各种任务的运行效率都在变低,主要问题如下 1. 阿里云数加MaxCompute (原名:ODPS:https://www.aliyun.com/product/odps) 1.1   MPI集群 1.1.1   背景 我们的集群规模不断地在加大, 17财年时我们的机器规模预估1.5W台 与此同时我们却有着不同的感受,明显感

jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效

原文:jQuery制作鼠标悬停水平滑动门切换特效仿阿里妈妈联盟广告切换特效 源代码下载地址:http://www.zuidaima.com/share/1607128309009408.htm 版权声明:本文为博主原创文章,未经博主允许不得转载.

阿里妈妈-RAP项目的实践(3)

接下来,我们就把我们的代码运用到项目中,因为我们前台是有jquery,后台管理系统是用angularjs mock在这两种的调用方式不一样,所以我就用nginx的proxy_pass 来代理 我在项目中的访问的地址是  http://noah.baidu.com/mock/datas/list1?requestTime=1466316466679&language=cn 我们要访问线上的地址是http://rap.taobao.org/mockjsdata/4793/datas/list1 下面

阿里妈妈-RAP项目的实践(1)

在同事的推荐下,去了解了一下http://thx.github.io/RAP/study.html#,它是发现在前后端分离开发的神器 下面我们来简单上一组代码,来简单了解一下rap <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>rap--mockjs---demo</title> <styl

阿里妈妈-RAP项目的实践(2)

接口详情 (id: 32872) Mock数据 接口名称 datalist1 请求类型 get 请求Url /datas/list1 接口描述 数据列表 请求参数列表 变量名 含义 类型 备注 响应参数列表 变量名 含义 类型 备注 ret object result|1-10 array<object> id number name string success boolean 上面是我的http://rap.taobao.org 的配置,大家可以看见result|1-10,就是随机生成1到

干货分享 | 创业公司绝对不会告诉你他们在用的工具们

本期的主题是,分享一下互联网创业公司从内容发现到素材梳理,从设计出稿到原型展示,从团队交流到开发协作所要用的 APP 和工具们...... 第二期传送门:创业公司绝对不会告诉你他们在用的工具们 VOL.II 第三期传送门:创业公司绝对不会告诉你他们在用的工具们 VOL.III 第四期传送门:创业公司绝对不会告诉你他们在用的工具们 VOL.IV(文末有福利) NO.1  灵感搜集类 关注西瓜设计研究所就好 (认真脸)... 另外只推荐两个 Behance behance.net Dribbble