第一步把你想要的小图标添加到购物车里,然后如图下载

第二步下载完了,如下图有这些文件

第三步,把你需要的必要文件放到文件夹中,然后把需要的代码放到一个CSS中,然后引用

备注,这几个文件就是字体,必须要,然后再来就是用CSS文件应用

有个这样的文件,然后把里面的代码粘贴出来

如下图

@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1523165667375'); /* IE9*/
src: url('iconfont.eot?t=1523165667375#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUgAAsAAAAAB4AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7klpY21hcAAAAYAAAABmAAABlNEso9NnbHlmAAAB6AAAATwAAAFM1IhBeGhlYWQAAAMkAAAALwAAADYQ/tokaGhlYQAAA1QAAAAcAAAAJAfeA4VobXR4AAADcAAAABAAAAAQD+kAAGxvY2EAAAOAAAAACgAAAAoBHACIbWF4cAAAA4wAAAAfAAAAIAETAF1uYW1lAAADrAAAAUUAAAJtPlT+fXBvc3QAAAT0AAAAKgAAAEATHanVeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyvZW7438AQw9zA0AAUZgTJAQAtXQzseJzFkMENgCAQBOdAeRhLMb6sxpdl8IB6KUOX048VsMmw2YUAOWAGotjEBHZhdJ1qzfvI4v3ErpzkRiC3et/KuRV3HdFecg/9RksMk417+q/V1+NLfc75Q19s5UXzotUX4gNudxBnAAB4nBWPvUrDUBiGv+8ck6Y1TczJf/qbHtsotQVzkoKI7eKiOAhOurnESdcuDlkEBwdXO4rgBbj2FrwIUbwKjaYP7/LC8w4vSAB/H3RJPTBhC3bhEE4BUB5iTyMtDKNkTIZoh5LtWhqNeBRWeG9MD9DtyZYTT5KBK1dkHTVsowjjSTQmEabJlOxj7LQQ/UZwxvpNRh+x5kXtu+KYPKPd4U19OiqOdmZW3DWVucqYz9iDIkuSQsiaruG161Slak0uXiQ9sJedbdJB1Y+Ck/N6t8Eu75ObVt+tIuY5mo2u9jozAqPMbeCYzK9s1BUvqPNNC+df656ptgafUILl12+S0Bzkshjc4KkgQmRPNPvJ6ZVYOWTlUCgdFXSAPkdhCJvbPA1TERpYkiVZlhSLPRy9kfdfIRYLQS7K6T+XYTbyeJxjYGRgYABiLsPQunh+m68M3CwMIHDt/anHCPr/QxYG5gYgl4OBCSQKAD2+DBQAeJxjYGRgYG7438AQw8IAAkCSkQEVsAAARwoCbQQAAAAD6QAABAAAAAQAAAAAAAAAAHYAiACmAAB4nGNgZGBgYGEIZGBlAAEmIOYCQgaG/2A+AwAREgFxAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgIWRiZGZkYWRlYGxgj2vNDcptSieA0obMjAAAFB5BqwAAA==') format('woff'),
url('iconfont.ttf?t=1523165667375') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1523165667375#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-number_:before { content: "\e77c"; } .icon-number_1:before { content: "\e77d"; }  //在HTML中添加这样一行代码
<i class="icon iconfont icon-number_"></i>
//这样这个图标就添加到页面中了。

添加阿里巴巴图标,让你页面小图标都是CSS3写成的更多相关文章

  1. font awesome 页面小图标

    font awesome 页面小图标 前段时间做页面,从网上查找资料,发现了一个好用的工具,就是font awesome奥森图标,使用了一下,发现非常方便,而且很灵活,纯css编写,可以和bootst ...

  2. 请问如何在PS中将一张图标里的各个小图标分离成一个个图标?

    1.用切片工具比较简单快捷,把要切的图标一个个的切画出来,切好后存储保存格式为web,导出时候会出现一个images文件里面就是刚切好的图片 2.用裁剪的方式裁剪你要小图标,(你可以记住第一个裁剪的长 ...

  3. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  4. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  5. 微信小程序:添加全局的正在加载中图标效果

    在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...

  6. 网站在域名前面添加logo小图标

    如何给界面添加logo?就像百度的首页出现的图标. 1.准备一个ICO格式的小图标. 2.将制作好的ICO文件放到tomcat下的“D:\apache-tomcat-6.0.16\webapps\RO ...

  7. title中添加小图标

    <title>标签中不能添加图片,但是可以添加小图标. 步骤: 1.做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透明背景的16 X 16像素P ...

  8. 给网页标题添加icon小图标

    so easy: 给网页标题添加icon小图标: 直接在html文件的head部分添加下面代码(注意href的路径): <link rel="icon" type=" ...

  9. 浅谈字体小图标font awesome,iconfont,svg各自优缺点

    三种都是矢量图(即放大不失真),但是个自又有个自的优缺点, 1.font awesome: 优点:相对比较简单,查看官网看例子基本上都会用 (http://www.bootcss.com/p/font ...

随机推荐

  1. web前端之html基础知识初级

    html 基础标签 单标签 1.注释标签: ctrl+/ 换行标签: 横线标签: 标题标签: 段落标签: 表示强调标签: 文字 属性:文字加颜色 color:改变文字颜色 size:改文字大小属性 例 ...

  2. docker镜像源设置

    由于docker默认镜像源为国外官方源,下载速度较慢.设置国内镜像源可加速 修改文件 /etc/docker/daemon.json vi /etc/docker/daemon.json 添加以下内容 ...

  3. bounds与frame的区别及setBounds的使用

    转自http://www.cocoachina.com/ios/20140925/9755.html 在iOS开发中经常遇到两个词Frame和bounds,本文主要阐述Frame和bound的区别,尤 ...

  4. 关于手机端在同一个Grid中使用不同的布局展现即Layout的使用

    标题可能说的不是很清楚,我举个栗子好了,现在你正在写手机端的一个审批模块,这个模块要求能够展示所有待审批的信息 比如出差申请,请假申请,加班申请,以及报销申请 那么我的思路有两个 1:建立一个Tab页 ...

  5. centos7系统之telnet命令rpm包安装

    centos7系统之telnet命令rpm包安装 1. 下载安装包 rpm包下载位置:http://vault.centos.org/6.3/os/x86_64/Packages/ [root@ywb ...

  6. sed使用---转义字符

    https://blog.csdn.net/wangcg123/article/details/50667883 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义 ...

  7. Object.assign()遇到的问题分析

    概念 Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象.语法如下: Object.assign(target, ...sources) Obj ...

  8. Hibernate纯sql查询VO对象封装

    hibernate 纯sql查询返回结果集(未关联映射)组装VO的问题//须保证别名字段与Vo字段一致 //引号中为vo对象属性需与sql查询返回字段一致.addScalar("chname ...

  9. "less is more",用"less”命令查看linux文本文件

    less filename:可以方便地查看文本文件 当一条命令的输出结果较长的时候,可以通过管道传给less命令便于浏览,比如ls -al | less.

  10. appium---学习

    一直想学但是没有时间,今天看到个不错的链接保存一下. 学习链接:http://www.testclass.net/appium_base/appium-base-summary