文档章节

阿里巴巴Iconfont使用以及如何设置渐变字体图标

前端老手
 前端老手
发布于 10/10 19:58
字数 441
阅读 116
收藏 0

 

1.下载

 

 1.1  下载地址:  http://www.iconfont.cn/

 

  

  

 1.2  在搜索框中搜索需要的字体图标名称

 

  

 

 1.3  选择心仪的字体图标加入购物车

 

  

 

  1.4  选择完成后,进入购车查看并根据自己的方式选择下载,我一般直接下源代码

 

  

 

  1.5  没有登陆过的需要进行登录,登录可以通过GitHub/微博/阿里域账户名(内部人员使用)

      登陆后再次进入购物车选择下载即可

 

  

 

  1.6  下载后的文件里,有三个html文件教你如何使用字体图标

 

  

 

 

 

2.伪对象中使用

 

   2.1  最简洁的方法

    link导入css,直接使用类名.iconfont

 

    类名放在全局div下即可

    

 <link rel="stylesheet" href="font_icont/iconfont.css">

 <div class="wx_wrap iconfont">

</div>

 

 

 

 3.设置渐变色

 

  3.1  设置背景渐变色

 

 

background: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#FFF));

 

   

      linear 表示线性、0 0 表示开始位置的x与y的位置,0 100%表示结束的x与y位置,from(#000)表示从当前颜色黑色,to(#FFF)表示渐变到这个颜色白色

 

  3.2  规定绘制区域为文字部分

 

-webkit-background-clip: text;

 

  

 

  3.3  文字填充色

 

-webkit-text-fill-color: transparent;

 

 

 

  

 4.完整代码

    

  4.1  完整代码

 

.nav ul:before{

  content: "\e501";
  font-size:50px;
  font-style:normal;
  -webkit-background-clip: text;
  font-family:"iconfont" !important;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#FFF));
  
}

 

    

  4.2  效果

 

    

加强效果,来一排

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=hh1b1kkjib0j

前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
推荐一些造福独立开发者的第三方技术

作为可以非常方便做出一个可见产品的客户端工程师,我们或多或少都想过做一款属于自己的产品。在公司里,会有UI设计师、后端工程师、运维工程师等专业角色来解决其他问题,我们只需要专注于客...

halohily
2018/04/09
0
0
微信小程序wxss样式文件中引用iconfont素材

由于公司之前的微信公众号项目中icon图标大部分采用iconfont,为保持风格一致,在开发微信小程序时, 也以同样的方式引入iconfont, 结果icon图标无法显示! 引用如下: 原因: 小程序的wxss文件fon...

sufaith
2017/01/03
0
0
FW: 认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg 一、Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Lo...

SamXIAO
09/23
34
0
阿里巴巴iconfont的正确使用方式

为什么要使用iconfont? 顾名思义iconfont就是把图标用字体的方式呈现,其优点在于以下几个方面: 1.可以通过css的样式改变其颜色(最霸气的理由) 2.相对于图片来说,具有更高的分辨率 3.更小的存...

Mr_zebra
2018/03/09
25
0
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg

在看别人 github 项目的时候,看到了 iconfont,百度了一下是阿里的图标库,这个很容易理解,但是自己操作一遍之后发现下载下来的目录还包含了 .eot、.woff 等文件,对于这些新东西感到有些陌...

dkvirus
2017/10/22
212
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL 存储过程

参考地址1:https://blog.csdn.net/yanluandai1985/article/details/83656374 参考地址2:https://www.runoob.com/w3cnote/mysql-stored-procedure.html...

gantaos
31分钟前
4
0
AWTK 中 LCD 接口的四种实现方式

LCD 接口的四种实现方式 LCD 是对显示设备的抽象,提供了基本的绘图函数。自己去实现 LCD 接口虽然不难,但是需要花费不少功夫,AWTK 提供了几种缺省的实现,利用这些缺省的实现,在移植到新...

lixianjing
36分钟前
10
0
javaBean和数据层的DAO设计模式

jsp:javaBean 一、javaBean简介 javaBean是使用java语言开发的一个人可重用的组件,在jsp开发中可以使用javaBean减少重复的代码,是一种特殊的java类,使用java语言编写,遵循javaBean API规...

Yoonajava
38分钟前
4
0
对《Java核心技术卷一》读者的一些建议

《Java核心技术卷一》是唯一可以和《Java编程思想》媲美的一本 Java 入门书。单从技术的角度来看,前者更好一些。但上升到思想层面嘛,自然后者更好,两者的偏重点不同。 思想不会变,所以《...

沉默王二
38分钟前
2
0
使用cat 查看日志指定的行数内容

从3000行开始向后1000行 cat stdout.log |tail -n +3000 |head -n 1000 查询文件夹大小 du -h --max-depth=1 *

writeademo
43分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部