在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等。。这如果还用切图你就OUT了。。

而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大小,颜色等样式,美滋滋。

而阿里巴巴矢量图标库 ,各个设计师们为我们制作了海量的小图标,任君选择  截至目前2017.12.8日 已经拥有了约185万个图标

链接:http://www.iconfont.cn/

好了,进入正题。

第一步:打开上述链接 ,进入图标库,哦对了,还得登陆,然后在图标库右上方的搜索栏,搜索你的项目需要的、或者你想要的小图标。

比如我需要  “搜索”、“返回”、“删除”、“小菜单”这些图标。那么在搜索栏输入一个“返回”,将会出现以下界面

当然。这还只是一部分。5000个返回的小图标任你选择。

第二步:如果你需要其中一个,鼠标选中,添加入库。此时,你的购物车中就有了这个小图标。

然后,你可以再挑选其他的 ,跟逛淘宝一样,把需要的加入你的购物车。

第三步:你觉得够了,那么就可以结账了,哈哈哈。打开购物车。选择下载代码。

这时,就把你刚才挑选的字体图标都下到本地了。

第四步:解压文件,得到以下目录文件:

这个是iconfont为我们打包的一个刚才的图标文件    也就是你的快递到了。可以打开包裹(demo)看看啊哈哈。

第五步:把字体图标文件放入你的项目目录。在项目目录下面建一个fonts文件夹,把上图的最后5个文件拷贝进去。

第六步:在你的html中引入iconfont.css。然后给需要图标的地方加一个    <i class="icon iconfont icon-fanhui"></i>

改一下类名,相信你已经都懂了。。

绝对干货!!css3字体图标—丰富的阿里图标库iconfont的使用详解的更多相关文章

  1. flutter 引入第三方 Icon 图标(以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

  2. CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...

  3. CSS3新单位vw、vh、vmin、vmax使用详解

    像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 新单位也成为视窗单位,视窗(View ...

  4. 阿里云部署 Flask + WSGI + Nginx 详解

    抵不住朋友的诱惑,今天终于入手了一台阿里云服务器,是Ubuntu 1.4 32位版本,最初考虑是用来尝尝鲜只是买了个最低配的,价格算起来与在国外买个空间的价格相当吧(可能一年才贵100多),但用起来感 ...

  5. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  6. VIPServer:阿里智能地址映射及环境管理系统详解

    http://geek.csdn.net/news/detail/110586 作者: 周遥,阿里技术专家,花名玄胤,毕业于四川大学.六年大型分布式与中间件系统经验,三项国家专利,参加过多次“双十一” ...

  7. CSS3 - 新单位vw、vh、vmin、vmax使用详解

    参考文章出自:https://www.hangge.com/blog/cache/detail_1715.html

  8. 收集的可以下载css3字体图标的网站

    http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons

  9. 微信小程序 - 使用字体图标(阿里云库)

    实现 阿里图库:https://www.iconfont.cn/ CSS3:[attribute*=value] 选择器 步骤 1. 加入购物车 2. 下载代码解压,复制iconfont.css ap ...

随机推荐

  1. 防DNS劫持教程,手动修复本地DNS教程

    防DNS劫持教程,手动修复本地DNS教程 该如何避免DNS劫持的问题呢?1. 请不要轻易连接陌生网络.2. 可以通过手动指定DNS(DNS用于将域名正确转换为您想访问的网站的作用),修改后你的网络应用 ...

  2. web前端----css补充

    css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图片的位置(也就是设置元素 ...

  3. ACM题目————Sunscreen

    Description To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2500) cows must cover her ...

  4. jquery的click无法触发事件

    一个页面需要在加载后勾选table中所有行的checkbox,于是就这样写 $("table thead tr th input[type='checkbox']").click( ...

  5. 依赖注入(DI)在PHP中的实现

    什么是依赖注入? IOC:英文全称:Inversion of Control,中文名称:控制反转,它还有个名字叫依赖注入(Dependency Injection,简称DI). 当一个类的实例需要另一 ...

  6. 20145127《java程序设计》第七周学习总结

    一.教材学习内容总结 第十二章 Lambda 1.认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Arrays.sort Comparator: 对比C语言中使用函数指针 匿名类与多 ...

  7. RAM,ROM,NAND Flash,NOR Flash(A)

    他们四者相互独立 RAM掉电易失数据: RAM又分两种,一种是静态RAM,SRAM:一种是动态RAM,DRAM.前者的存储速度要比后者快得多,我们现在使用的内存一般都是动态RAM. DDR是Doubl ...

  8. Python3基础 生成器推导式 简单示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. 我在linux中使用的vundle 和 vimrc配置

    set nocompatible filetype off set rtp+=~/.vim/bundle/vundle/ call vundle#rc() Plugin 'gmarik/vundle' ...

  10. MOOC_Java进阶_翁恺讲_第三周题

    package mooc_java进阶_d3周题; /** * 没有使用HashMap */ import java.util.ArrayList; import java.util.Scanner; ...