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

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

第三步,把你需要的必要文件放到文件夹中,然后把需要的代码放到一个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. Mac下安装nodejs,然后安装Vue-devtools工具

    一.安装nodejs 1.这一步简单,只要上官网下载下来,直接按照提示安装就可以,mac版本的安装方法很简单. 下载nodejs的官方网址是:  nodejs.org    ,浏览器输入就可以跳转到了 ...

  2. npm run dev 报错:Error: Cannot find module 'webpack-cli/bin/config-yargs'

    使用 npm run dev 时报错: Error: Cannot find module 'webpack-cli/bin/config-yargs' 原因是找不到webpack-cli这个包,使用 ...

  3. gcc版本切换

    查看安装的gcc版本 sudo update--alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-5 100 显示所有版本gcc路径 sudo ...

  4. 2018-8-10-如何使用-Q#

    title author date CreateTime categories 如何使用 Q# lindexi 2018-08-10 19:16:51 +0800 2018-2-13 17:23:3 ...

  5. poj 2505 乘法博弈论

    转自:http://hzwer.com/1921.html 题目大意: 题意:Stan从1开始,可以乘上2~9中任何一个数,Ollie也如此操作,只到某个人本回合的操作超过N为之..1<N< ...

  6. centos7在线安装mysql8.0.16

    一.官网复制安装源地址: 1.进入官网地址:https://dev.mysql.com/downloads/repo/yum/ 二.进入/usr/local目录下 ,创建mysql文件夹 三.使用命令 ...

  7. linux学习-用户组与权限管理

    一.用户与组 1.用户 管理员:root,UID为0 普通用户:1-60000 自动分配 系统用户:1-499,1-999(Centos7),对守护进程分配获取资源进行权限分配 登录用户:500+,1 ...

  8. Python3 使用HTMLTestRunner.py 报错ImportError: No module named 'StringIO'处理方法

    HTMLTestRunner.py文件是基于Python2的语法,python3使用需要修改语法: 1.>>> 94行 import io # import StringIO 2.& ...

  9. [CF1161F]Zigzag Game

    通过这道模板题学了一种新的模型,记录一下. 稳定婚姻匹配 至于这道题,显然是一个二分图博弈的模型.考虑选择Bob,我们要找一组匹配使得任何情况下Bob都有匹配边能走.不失一般性假设Alice选择了in ...

  10. vue开发微信公众号--地图

    在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后 ...