按钮图标
我们经常在项目中看到各式各样精美的按钮图标，其中绿色部分就是今天要提到的图标，例如：
但是在自己的项目中制作的按钮图标往往不是很称心如意，那么怎么自己有选择地做出精美的按钮图标呢？下面是我在项目实际开发中总结的三种解决办法。
第一步：登录阿里巴巴矢量图标库（需要注册github账号）：http://www.iconfont.cn/，点击你想要搜索的图标名称，例如：添加、删除：
第二步：选中你想要的图标，出现一个购物车的图标，单击它，这个图标就进入了购物车中：
单击右上角的购物车，出现下面的界面：
第三步：单击添加至项目（并命名），这时候这个图标就添加到了你的用户的项目中：
第四步：点击下载到本地，下载的文件包括demo的html和css文件、iconfont的css、js以及各种字体文件。这个文件的结构如下所示。
在上面的文件中，已经给我们列出了三种方式的demo：unicode方式、Fontclass方式以及symbol方式。
二、使用介绍
那么怎么使用这些资源呢？
1、Fontclass方式
在你所在的项目中，将刚才下载的图标资源放置到工程目录下，在jsp文件中引入css文件：
<link rel="stylesheet"href="${pagecontext.request.contextpath}/icon-font/iconfont.css">
我们来看一下这个css文件的内容：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1531027630144');/* IE9*/
src: url('iconfont.eot?t=1531027630144#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:APPlication/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAtAAAsAAAAAD9gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7koGY21hcAAAAYAAAACjAAACGDoD3mxnbHlmAAACJAAABsoAAai4sLSWWWhlYWQAAAjwAAAAMQAAADYR7cdZaGhlYQAACSQAAAAgAAAAJAfdA4tobXR4AAAJRAAAABkAAAAoJ+n//2xvY2EAAAlgAAAAFgAAABYKLAcMbWF4cAAACXgAAAAeAAAAIAEbAO5uYW1lAAAJmAAAAUUAAAJtPlT+fXBvc3QAAArgAAAAXwAAAIIIlpDoeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sc4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLwQY27438AQw9zA0AAUZgTJAQAnGAyKeJzFkT0OwjAMhV/oDxQxIKT2FNyjY0/RhRN04AA9ARPne8rYpXN5jrtE7ODoi+QX2Y6eAVQACnEXJRDeCLB4SQ1JL3BOeomH8huuUg6Y2HPgyJkL19htm95yrU1aHkH1+THtqH61ulaacUIjqf6q/FmE/43O45Lu557JFUw7+iJ7R96BgyMXwdGRn+Ds2H65OLZvro7tO7aOfEfsHDQflrszXQB4nHVVbWxbVxk+7zm2r6/vjZ37fW3HTq5vbKdx4zj+ylcbN0tb1LIi4iZhXTekdmvXloZ1GWg/gMlkrTSkdXWEmBQVBGqBaAlQwTSJSV2biMGfIf5srK3GDyYQSBMCBn82Ed/wnjiU8gPL99z7nvN+Pud5zyF+QrY+YDeZTTTSR4bIfvJZQiCQg1SYJsDJlvM0B4bjNyw9zLJu1hHcVJ7tBSsV0M1itZyxAkIgAmFIQskpVrN5moVKeYKOQ9FMAETjsaNquktlTQjZ2eQl7zC9Bka32xWZGPAO7a7pxR4t+JysqlFVfSkY8PuDlPoiYZi3TNEvhgLe9/2RmHGzexftBjmajT18rKMnrp54sfzFRNoSARoN0OI94ZWaElPw/9WYqalRobMjaMc63F4dnvujZGtyIvMHgj/Y2tr6BdtikyROiD8P2UyvkDXCkIVMuQbV4appGVWfpgfYh37WMeO9/S0soNNbDIdvXc2EY/A7OOML7sk83//mtG78RNcl0KS09I0LcVExf2S+4X1U/SkREM9V9h6bIwy/DRIlCVIjUxi8VHEr+KSdMAhKEixnAoaVtKM4gI+Gk65SzrhOKmAoLuam4HJJ0U2OakUpWX60hdlGY20N3mvN9hYACr2M4Ls1B6veHCWtVTrXAFvN2WprVbVzqg0oNaIqrKpR4xVvdW6ONnL9uVk0bJG2A7rW2EJDaHhrXL2hRqOqx50wgvIW4TKQV/atEdiuq4F1FbEWTBITxix5kkIYzFIVAcwOV8uDkHGzGTcVMLvBRR0sFHXKGfaFkMw2lpY2GI6XLwZBFgUfZbASCq0AUJ8gyhC6eOX6PZ/v3nUcZdgni0sbPt/GUnPDd1HQZfBRgB8KurCCFJF04aL/3rW2uigTRJtsrbN1tg/3doCMEpJ2dkB0MAWlpKB0H/k0zxsn7udnpdu1oBQG2vCe6B8BGOmnY/3DsA/qE63re+uU1vfCDah9HE8AWzo/32SsOZ+fdj7xnqqfp/R8fXqe0nnGzUba5t5JuNG2a12fqEPmE2c63zY7v8QgEf94i85P/8cW+enDGt5mj7ICkUgE+zGKLHWUYUdxFUdAnpQU7D/D0TiPSuwzrUfegH/lvIe+R7/mfXf37lfheW9x5vev58r0xuutLvrzq62XqeMtvpuDUO4a538A/b/Fvsn2EBl9jyIrj5BHESlOsHKGE083XRTYtqDpJrgVxAW3MQEu7/dx0HaIq5V476fLVd7nluGAHhAQ8ApzWLE6rHEHAksCBVGWVVk+IcoGvg0Z/nYLafdOb+E2LojHxlGAvt5B2PMIyq0/2+o7yDvvLtRt1bur2nvgn00kBrcFA6QpWYSb3NDbz8f/ftNTtTaha6jZurpD7lMo1FTbVmutZ9rdQE+1fvmgHQKMmPyA/YkdR8x1kidjZBYnIQ8B08IzrZpJO7zykpOFbXIg2QXOmPsEQgFK/KyztrESnMoEjMMwniaD3CIJQkDgjWA47O7mh1JM8UnM4C/v760rEcOIsNiU9+u5swA9pmwHR2hUtfvAd3mh/pVEUTkB9SNSZAoq2Wa09T5EpHdDvT7qXw7ZkhEFGnmtrwz01RRTJdYZkzb/KjElamhd2kOsQD//cG5/Uu+zRuOFrtTs+NkXKHxqb7FSa/0qIh2ZaqLla3NSRM4Vouay2acmq0nc8XLf8vYZtsJ+w44Rlxwk58gV8jPyW/IBMiXLS+R1ZqrDD7ZQkuPCbwHBGi7xlSreA+1+0sMUl7s5Robl4KSfDzWYgEo1k32g7dADKlrjHDXU4ZGy/yeSYPABlTj//jdcmN2PxtczO04maGXHBdvOFOmM9nxnOZ3xeHqLQTFzWwwC7TKiu4C+/OzCFQp9thGnEBTXM0Wgn7ujSCplqXwPwIXHHrsAqUGXMkXuvBPR6eZHFHRW2fw6RW+3g0Ea13EbafNLzzYp7IoaXRQEEd7MlmDzRfZlCkO963Q7mmljtMsLC5d5NB3VgqGNdAHYwc2/gNF5p1NSMOSAA/SZxx9fAB6TUUWO3Ok0Nv/BQlQN31NkhVF3MAVPHz/+NNIon2JUldS7YRXYwOaPw5oWZkdx3PXtdBEg1CGmRhNtPtAXzo7NppKjKbEjBFj/1Vt4V1qFw5MH8kefBHjyaP7A5OGClZA1PXLqdFhf/062DNjSorPt4dwlSi+dG591EyOOKIew8OXl3iGgoY5QaiyZmhk7swiweGZsJpUYc0M8BAylnzoTMVW5yxo8NHkwP3Ma4PRM/uDkoUGzS9aMzidOYta6nLCHMImB+klKT9YHDkx+umAnZF3reB+pDYDDvwEH6qIpAAB4nGNgZGBgAOJALdt58fw2Xxm4WRhA4Hr6wXUw+v///0tZGJijgVwOBiaQKABCtQxvAAAAeJxjYGRgYG7438AQw8Lw/z8DAwsDA1AEBXABAHXhBHF4nGNhYGBgfsnAwMLw/z8LA4jGjgFeFAMPAAAAAAAAAAB2AKgBFAFkAcYB9gKAAwoEXAAAeJxjYGRgYOBieMTAzgACTGAeF5D8D+YzAAAgCwIKAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8ercpuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxtxksOQDAURuH7e7Ram0GF9TRNpTW4QknYvYjEyJl8hzJ60/SfRoYcBUoISFRQ0KgJp4hu4dbUD8nvTWfG700/iPXw29XKPVqeo5UpWHbhUJPlFDwHL16IbrW/GQYA') format('woff'),
url('iconfont.ttf?t=1531027630144')format('truetype'), /* chrome, firefox, opera, Safari,Android, iOS 4.2+*/
url('iconfont.svg?t=1531027630144#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont"!important;
font-size:14px;
font-style:normal;
margin-left:-7px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#2fff17;
font-weight:bold;
}
.icon-back:before { content: "\e64f"; }
.icon-save:before { content: "\e688"; }
.icon-update:before { content: "\e6f5"; }
.icon-query1:before { content: "\e6f0"; }
.icon-add:before { content: "\e665"; }
.icon-remove:before { content: "\e647"; }
.icon-uncheck:before { content: "\e815"; }
.icon-check:before { content: "\e816"; }
该文件分为三个部分：@font-face和.iconfont以及.icon-xxx:before. icon-back:before用于引入图标所需要的资源；.iconfont则是设置图标的样式；.icon-back则是引入unicode编码。在使用时，我们只需要将unicode编码所在的类名添加至i标签的类名中：
<i class="icon iconfont icon-save"></i>
相应的图标的类名我们可以在阿里巴巴图标库的“我的项目”中可以找到：
如果你觉得这个类名不规范，那么你可以自己在iconfont.css文件中将其修改为你想要的类名，然后在引用时，只需要将你修改的类名作为i标签class的一部分即可：
<i class="icon iconfont 你在iconfont.css文件中修改的类名（去除:before）"></i>
2）FontClass方式的优点
FontClass是Unicode使用方式的一种变种，主要是解决Unicode书写不直观，语意不明确的问题。与Unicode使用方式相比，具有如下特点：
· 相比于Unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
· 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用即可
· 因为本质上还是使用的字体，所以多色图标还是不支持
3）如何设置FontClass方式的图标颜色呢？
由于这种方式从本质上讲还是字体，因此设置字体颜色就能实现图标的颜色，你只需要在iconfont.css文件中的.iconfont类中添加你需要的color样式即可。
2、Unicode方式
a) 拷贝项目下面生成的font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }b) 定义使用iconfont的样式
.iconfont{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }c) 挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>如果你已经在项目中引入了iconfont.css文件，那么就不需要重复上面的步骤了，因为iconfont.css文件已经包括了上面的所需的全部资源。直接在项目中插入 <i class="iconfont"></i>即可。字体编码你可以在阿里巴巴图标库中找到：
2）Unicode是字体在网页端最原始的应用方式，优点是：
兼容性最好，支持ie6+，及所有现代浏览器
支持按字体的方式去动态调整图标大小，颜色等等（设置颜色的方式同上）
不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色
注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式
3、Symbol方式
1）使用方法：
a) 引入项目下面生成的iconfont.js
<script src="./iconfont.js"></script>
b)在iconfont.css中 加入通用css代码（引入一次就行），引入iconfont.css文件
.icon {
width: 1em; height:1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
c) 挑选相应图标并获取类名，应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
2）Symbol方式特点
支持多色图标了，不再受单色限制，支持平台图标的颜色
通过一些技巧，支持像字体那样，通过font-size,color来调整样式（对于前两种也是同样适用的，fontsize改变大小，color改变颜色）
兼容性较差，支持 ie9+，及现代浏览器
浏览器渲染svg的性能一般，还不如png
相关阅读
文章结合过往案例讲述如何通过设计要点和方法有效系统地进行界面图标设计。
desktop.ini是系统可识别的一个文件，作用是存储用户对文件夹的个性设置（用户更换文件夹图标等等都会生成desktop.ini）文件夹图标[.Sh
淘宝开店最必须的一种工具就是阿里旺旺客服功能，这个在最新淘宝店铺调整后得到很好的体验，不断调整阿里旺旺客服代码位置及显示效果
Qt内置了一批图标，一共有70个（Qt 5.9.5），不同的平台图标有差异。由于官方文档中只有描述没有图示，所以写个Demo把这些图标全部显示出来
@陈子木 透明按钮，顾名思义，也就是在设计网页中的按钮之时，不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功