阿里字体小图标的使用

在项目开发中，我们难免会用到一些图片之类的样式，但是图片本身体积大，而且更改样式和其他标签融合布局相对麻烦，那么有没有更好的办法呢？

字体小图标解决了我们这个问题。

我们这次就说说常见的阿里字体小图标的使用

官网地址：阿里字体小图标官网

使用步骤：

进入阿里字体小图标官网，注册登录（推荐使用微博登录，懒得注册）
搜索自己想要的图标加入购物车
在右上角的购物车图标那一栏可以看见自己添加的小图标
当选择完毕后，将购物车的图标添加至项目（如果没有，可以新建一个）
在项目那一栏可以看见三种方式：unicode和font class是字体小图标，可以设置字体的属性，font class相对方便，只需修改class名就可以赋予不同的样式，但是它俩都不支持多色，只支持单色，而symbol是svg的一种，当前比较流行，支持多色。这里推荐初学者使用font class这一项，然后可以选择下载至本地，或者在线链接，这里介绍下载至本地

下载后的是个download的压缩包，解压此文件

打开文件夹将除了css、html、 js 以外的文件复制到自己项目中的font（fonts）文件夹中

将文件夹中的iconfont.css文件复制到自己项目的css文件夹中，并打开修改路径

原：

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1553565034687'); /* IE9 */src: url('iconfont.eot?t=1553565034687#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABQ4AAsAAAAAIygAABPoAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFaAq0QKh0ATYCJANYCy4ABCAFhG0HgjIbZBwzg8LGARBIvDzZ/+F4Y2iqn+2gQ8EsrgjNw6LpDgfp4pcP7pb28Vgarl1j+C6l3q6ZP+VQVv5EBFbr83ooJUG1bD37IQWZMZLylEdFRXnkWcgK/RopUOhsBJY30aYWJdiElJV+f2dT8DA8bfPfBX0HHKlNGA1tFIqJkTgjwV7U31zL2vqLxpXTVegq1VW5dtFJAIT54LvlN5snMK0gU5HKRJ2f9Df5tcrJBHzyhLuJWQE2QJzslfu69acyrB2WM/ur7rr+FyDQIA015HrgH2fmz8+lNlckoYDdQJjZCVcl/0ty8JNfeMe/fNimnHaUG4JqZSfUZufmkhLmBkCqIOc6oybcvJ9QhW/z59sR9LlzKkSRwXBmD2oSauwf0hWJKslEn0ygatlRcfyRnA2iPE8JnHJNVWUg+nzyhvJQbi0q1s3X4kVBOd2mcwB45n8+/oBSmaSQ4z3VyVVsOcif4N1v+B+f5mY4JMex3ogcjiJPfCg73wHyQY+4WlUZUW/Ma9O/X/8ksWUaXWx6Uckw66l3v+sTGBwFxwy9Nu/+MG/FHLvMI6Tary2pKyoJLU01nfL69aoY1K1RrP94VaKITqpDPM7BIJ/ghgqcQUBlMBgKMASoDoYCFcFIQCUwNlCAyYBaYBqgJpgOqAYWC9QBS4ciWVYA1AcrBOqBFQFVwEogFZ0NBeqCDQNqgFmhKBI7BS5nsMvoUOWpQ7LOUdwI5Tuqr1D0QAunzpyiw/GKvFDzTkoL0E8qKYLDN/AvTycIOp2Gy6QSChtFMcyjXgZ1Q5iUYBSi0aDIZigxAsMgXIlx2X4Yzs6gMSAMQxXOcMyZ/4kk9rKPRmOxRZLscQJICAmEi9BnJ4Ew7PFoNLKYg9mLXMhkmlxkZ8diYti8NDrS5Mg+w8/pS/fFiG1khenUaTfk1MyKYHaNpvmxlOLsQg136tveFqwtjhc5iUu04pZJcTsp6x1lhZaUxIomqW+o7xUaTsOt72ZxL5vXb7+mM81XqNXW19xpVFnI+WpUUvkdqxnZov/hlnK7GhPVUb+wiDXhZq12rVKOFsY2viNdMzomy5K8Xn+2aHFD42VjYeWhFpdto5/X5nMfY9u04WF0NNOLMaWIudZbStDVFYs69ercCfRWDmCEYY7iVLoiDkUGSrmAqOFs5/wZmMzfpEBoC6KaO+5SMGPm3M4de+NKTLkZjipIgSSaJEU8JUs+rfzXo2Od4yDWqSdoOGg+D7Df2t2MPqptIo5pq1v9UAhQkIpVwQjiKddIxzpK7xFRT8o1JTccBG9G9CDVYlFJ+DnKgHqlEOLcDexQ8ysH175wX9Ln+JnNik2OuhmPvTwQOoOAPGlJC52UW14iaYjW6HBphK3xc5JcK9DnzQmu5UrNd4cxleNn1RFMqF5xmE213HDOVaZknErD1YU0CiMl1xhSKRPGCSNMS4lUKxN1ojKhBzZA0RWUEGF6fgRFCfxGpmQaZ2p2GIAiYTIhwlUvQZlocqRG7OgnCTDIUjVi2lEoQ57cd9Nhywg7X014j8iTVNA+zMw2JX189xEkxYTilxB9fA8nvObhFqcFI3xKHyf9tpFOoTUVuA+eIlpJg6Bs4rb5iRH256rJ9Pt1CEg0jum2/sCt1yHRgUS00XADhOEgqt2r0YsTpWZx9S6u1RBVzgYjtJfUiitv+8Ahdxor39vgm9FJ2FyrhaIDu/TfjLDtJaqlNqmLMgjvpEVgyALNadxT/VtJXFQZn0kdOv93wEXYg5QBcDNJCrt+/Rwgn858+JFem/6+8ZVH0Q6Yf5EC4cuRKPc8qXjPLODOKc9on/H07UBwu74CvsMgBb8ena0Oq456pHhR72fYSImthqPMNJYPQmOmzPnemY5cmekzhAildlYWuK+OY9ncpbNvgggNmdPGc4/lHeBKyreTGRHblRgY8SmHQE/FK8JYXm87ubx0RrC2kQJ3knfPOhPL74ytrlWbVlIyNZFgw9iGetcnVCA3DKUhK0blQRgCd8GL0xHDCw1dzUzUChwYRjM498p05g587zF9+iDd8of0WbjUp40VELwgz7Zz3/Fp2JUppGhHtOtjJhHD0oakcNKA1lqh5oCTwA3yWdW0eM6WguQpyIju3sOsASDceqMkaWZAlx5dz/bIPkt08Z8P71l4me7qvjCr+xC3guK0hIuiYB8sNxAPWu0jLzsbsImjyL292yRwL+9PtogepIQc5iArcIwEpHS2GYjoYWeqDlke54jmqk30BZgFiXAlQoCLc4eesSEm0cf4h6imGToxjOZYHcUGmjYtoL1VRERb1V6iMVYewqqqGbR7FLMtxQSHMINQIW0OEWOcwIiuq9o7KoKpcAi5govxokXoPYauMkKArJQh+hFB1EPZ9pRoHXlUZTica06w7K4eo4x3dEP3WdRXEi6hnrQCOkq/9d1nj64gQBUYApLGbfGz6J5a+PRxkg8gBcx1I8ohOku6SZkyYYkTzhoONC3kHIiKVxrOUWsuCiHRP3Booz6pg75tud9kw2Bet4O0I51Qr1n+gY8a6nqw1G7VrkY9arojHSn1242JNTlfNbT19ogn0aXacnbRlnf98HczVh+oOllt/8+ov2DPtCQfI6o9lLKrqn2j+YgjpeEY0qikpVkYOd9cYBJ14ujswfIYafCkxkxSVPTo6KK47GcI4bRQjhAdwyUaGtPBI0LyTEk9O4ryPikDAbNF1bs1XLMQKimGlEKoTJ+aLDJr1nGs7mP6gc7Ytw2rWJN2mBtHZYutysIx98b6/RwAhnOanINS28+brXytV+c/2Z32ltn+Z0Dr35ltv/s3/ToMd4gyjJGiug0yD/sa6oA56k0l6Ihk6AZnJIpTzYK2aM96mhVzpMhXVRP2KORCLGCztU3L7LXZjjx0UT60YIC6YhUwoe1/+g8hQdqPtosn0N1ERX/QQ6C2Ykdu+OP7M58rXoiIyBOy1cdyC4Duchp/v/dGNn6/7DFO4K6HOxLMx0+gHkmc6bc5XpO7yH67zwZNwqgFZcqlg+9lWzhJ/sfWFvrbEobkTisK8C2vf+s2l78k2XLPJ/h8KEU0ke5XtPCqM68oOEWbsCg3F0NBwvBnEDqeuvOO+95PkJX4tF5zL/+jGUWRloS8oqoBOcob8A3lEJZPzGtxG+MbEmtnH6v/Nwoa9Y8XtrcPjq0VIZ7Vg+btbs06yVaBG1lN83cPysUQp8ehT//5KSzJFaqkChCqcqjsvIMB7E4nXzYaqME5q9paX1FFf897R+8z3vHee7fS3wpeofWTCt52KKtY9anLlwZq9lLYQ6ov7dHso1Qx7grvMgb45gwWDa7uWxo4SDSo+NCAN7sZaKCJyxqOzOptAJczyS7kketc1qUY9q9opoWXhs/3dXFtEdnFObq4H1rV1dkxw2X1vQwohV4+FEqHDPmDE1izljlnZmRIpQZQZoIMUKLJlAgYbVG07BJIf9pOURdnSgMKpynK4DnuoDbCPML+3MCRuAeD9z9EpfBnm9CaqqPkCvJBfM3aW3swt57hbLwOZ28TW+XXR4QzPghtbW97L/gwF4SMcA1t0YO68Brnqj6J0w/pA28Y6tFMYZnJJgRCFv7BXSi0MYHQ0+M9zvZnmTLJNpmNbDKx/AH+wcOj9B3zQ+nsxPcBoJslLxUJXpcml5KVNLfhkzxhhGplt5IRjnDScDea+YsWIbJZrawYQmxO086JFj4fIUKorawNpYhoxHNh9MrANJOCiGVtYGUTcOBnc/TNJnoiCGUjayMF4QonDuct6EajiPw2JZfDVAxQYfmIG5jN0aaZRYSRtZ9pjJfSjhDBIKiX5LB3ueJExzqf5vSQce3X1qvXH9/eJK3ls779hGL5XgfBeVI76bwgQF77Bl3aCccJE46v8q+1N0/zXddhl7iGol46dw99kgIRN6fLOQqdmyfwrLCCI/+akcRJHnqduxeCtKdM88VcDiPQypf2ZdslRhQrExSdXZMK11RDqcaamnsUqq6BxRnVqVFtKSl0+slbtSrPwcEE2Ow3Mf1S0vzzk8x4JhRfUpIAmbS9MfFEpeScSvfVESWTK+Oo9G5+AW+nX8DvplPjKslk1PGrTiU5V0lIgjKYKmblzTQjCIikrp3oy5fINhHRzpVLvH3Xz9Jy12U5iMdyn7MSHcPgqoVzNptdlRpaXx1egtf1cTv3T7hL9ne9K6gDE8klgsTEMtrwIs8P8yj8oNqoPTx3nER6QT4uDgwcscXsE+WYsBA5cRJeGKccB4KIs+enUsuGTT00RWi2nBNNrffRfp/zt6w3f2+P3ZfD+SVO2Pn4UJL4xfZ74sSV07m5O+Okvzi9RhnjLP8AQ0Y/yD9n+3p5+SVsmjqlTLbhqVP/rguQyeBW3mVeKxcCtn+rkP5+JDyrAFwixp2ehRw4gOCZJYCbbvNt1mh9tOi5uEQ5L7Ixc+etO25Or85I6V6mj03Ot1SBG+b4hBdxuCEEtTxAopXfzey+NoQV1G4AUR4m1iHNkskZ20E5ZJl8bUToyOCfnBpDdXLpM069ROdGukAQFxggcQj0gts5HA4AN7e2hw7NN5Wnm2lUY6bx1neuy0fpRxcuIzs4m4ExOgqFhTswpMGzIQFp4X0cFzUxYpI3o6yiwszwqQ+fEDXhI7dZxJ5sflGTXGv4S/wXMjJsaj+YUpm5wzr1UGA50xU8EFbivTXlDb++/freYK4+ipVngbVhepMX3Nx5vIlwWTzJt4tQPDcvgCTySP1n4PM796HfvqF49gngpo8BNJ9s4DA4FHm4TUUHdFUbn8NRv/+eBSecCJxOw+olh0VzJLotfdjBO16BA1EHojdFbRKNlTd4NnpaPZcYvaktvvri1elr/WpLVXRlcAoEl9UIDM/Uvev81F0qX7SQGvfUIKi5vEig6nR3WpiggqHVQ/R+47ZnOapKawW+7lgoOdxHZmR2jffVD1kgSlajC/00bXry2t4asuFpHLWg01ffpvFb26N5aiDXZASmkBSMZcRvUemCJOZsTp0koTQwGyhCQsg/roS2iepJ3WQJWUwz1ulxKx5jO1AMvgTT1+WwjQeMe0rivagHaBJyI7ORHIJgxBtJEuqm8a40A7Jzglc04OoyzIpHjOJKiW3ck3aAmkWFgBBwRiElNoE4r4JtrIvBrdg+NkZV2hAnmJEsiUC9ijIgITXEq3HmA/KDdcZIEPHj1OmBXvyHtfsCY6HdwvMM7+rubR0Ofz1OOJ/460lrnzNu4LvxYaXj8Mucwo8X2g86jp9iSllhLCnzFLZrkP2gXfgph4CYz2SVHMjlofLHbRHSSw4Z0p2mg8mjR5MxkpqPg0ppJQGn6cCJWufKkApWU9lLsTIrE6ZM0w2H+4fJ3Por2n+XUuaeTv71IVtsZP9iP/ZXZO+Q7TxmnCAboIVyR43KDQ8kgOmAEf/pjmbPXynfKF85UyyWz/Frfg8zGCiU02iYJdEgFB78oGfnwrp9bkXWG19yMxVzc2UZoqIbw2Q39Ypp3UVVXfNGh2OLXPumDN4/oWZ/1eiESU+RqSHz4kcOPl4VafDdwFvnP6PaJylvXW7OilKj8hDTKAkks8zSK8zy4J3DqppAqCQ8J/fbyBfMyIqn3WIoZFjS2BwaIipzitOpbu5clz36FIGt93ZxLTy0PNkvGQIDJ8xwuOjh8Wr63e5x1fnXcIB/dkihULBOYA+wNR3MRtddjlKaCAMOHxgibkyMfFdVXsWuw9fZ6Nw4T4aBQMdhm9j7qERPff+z/8VxeJgXiM00R056PPL59bU5+YNAOPvUiqOnXV/GH/vxY5m+dD19dMULuL+X+f17RPph5k9NkehF/gtRyQ9pqjRUt27HjFc/fghS4fc3buiQn6DJM2Hr9euNf4KXCce/f1/9JQCb+6BEsykRMkAmE5T44wQ1PD+e2bRF+uAtk/n2wYO7Li53d1lK5tDCu4jxnK7w2bTKOT38k3NiGfRzdIy8ACN2zkl+z7y3BCkeETe8KchbHkRR99llz3bKl/C+r6YE5S8v8BPf338fRP4tBADYjuhBjLyqHm1EJlc9cx5x0H1B0hEMeDFkKvwBc/XANmA7pRsJ8pfnwMe1h9oQVwx9RuYhuEqtDzK02SPEknR5GxJZdZcVAVX/kP3wZzre5JjGLX4R+e/484F1osvRJaywr1TGn/uT/UfW1vKI7YettHidMwD4u7bodUEA/I0e0SUG4Y/75KJ+AXqQb7cuETcEtDxJiUyz/VBJmdQIoInAXoMBAHQ2BYC/1/dywL2itPADy/+laOGLOhhQgHMdAqjAzYFm+9WRAAOo68iACiLr6MAXxG/MAFwwAiAAQmkAAB8wfVEHATbYVgcDJjhCEVX2eYoi+24dCQjAWw+ZYgipo4MciGuTATyuoGb2ahAcRiJoBYWs4gy62ZdTvzDxORjiWi72h8YSK3HY7i+jn6jQJLGCrZKjc7GIDRfiY7EM5jmL0nCKodtKRsqX3S7errgNuejMOnqD4B5NI1HQHk0hq/jubvbV/n9h4nMwhisej/5DY+nBRYe27QM4PlUV6IpFMdoqOeYIj8XtfMOF6INwzNkQi0r1XCmGbpuMoJUv7cid4qDqNvuWYiy4/nB/Fe+X62CT2WK12R1Ol9vj9fkROLh4+ASETRqCJ9DhOqryoFq/0k/79JSskobUyEoMkGYt+5RAucBFojz36Tkl6WGhE8N5cwoWf0pa+tBgQhagBjVHOA4gqKaSdQDRgtInvPLwSY1XoxiU9DRvyG2pyVaMR2Pf4iK7LrYYW8eipfTBMjMb8AlQ4QhslsMGmjUryDcROFg3Hqvj4/9oUUmdDgAAAA==') format('woff2'),url('iconfont.woff?t=1553565034687') format('woff'),url('iconfont.ttf?t=1553565034687') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1553565034687#iconfont') format('svg'); /* iOS 4.1- */
}

改：

@font-face {font-family: "iconfont";src: url('../font/iconfont.eot?t=1553565034687'); /* IE9 */src: url('../font/iconfont.eot?t=1553565034687#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),url('../font/iconfont.woff?t=1553565034687') format('woff'),url('../font/iconfont.ttf?t=1553565034687') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('../font/iconfont.svg?t=1553565034687#iconfont') format('svg'); /* iOS 4.1- */
}

打开其中html文件，按照其中的步骤引入css文件，在使用字体小图标

这里选择font class，然后下面的代码就是对应的class名

引入步骤：

引入css文件

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

使用字体小图标

<span class="iconfont icon-xxx"></span>

这里的xxx就是上图的小图标后面的名字

然后只要根据class名更改font属性就可以修改小图标了，比如font-size调整小图标的大小

好了，以上就是阿里小图标的简单使用。

如有问题，请指出，接受批评。

个人微信公众号：

阿里字体小图标的使用相关推荐

iconfont 图标转为字体_阿里字体库iconfont使用方法
天兴工作室之前写过一篇"zblog使用Font Awesome图标字体教程",然后发现"Font Awesome"太臃肿了,一个主题根本用不了这么多图标,图标样 ...
icon小图标的使用
icon小图标的使用适当的图标,可以达到一图胜千言的效果. css sprite font + HTML font + css css sprite简介: 在国内被称为"css雪碧图&qu ...
MUI tabbar购物车小图标的制作
1.在制作底部的 Tabbar 区域,使用的是 MUI 的 Tabbal.html 2.在制作购物车小图标的时候,操作会相对多一些: + 先把扩展图标的 css 样式,拷贝到项目dist目录中的 ...
react项目里如何使用阿里字体图标
1.首先我们看一下Ant Design官方文档的使用示例: 我们主要关注两个地方 ★★★★★ ① createFromIconfontCN方法中scriptUrl的属性值,对应的就是我们自定义使用的字 ...
在网页中实现icon小图标的几种方法
总所周知,网页的美观程度往往比这个网页的使用程度更重要,因为它能直接吸引用户的眼球.在网页中,小图标在美工方面的作用更是不言而喻,小图标种类多样,给人以直观的反映.在现有的网站中,99.9%的网站都采 ...
html+css布局实例：制作的淘宝小图标的显示
用html和css制作的淘宝小图标显示: 小图标的图片放在我的资源里,如需获取,可以取资源里下载代码实现: <!DOCTYPE html> <html lang="en& ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
关于input输入框内设置小图标的问题
其实很简单,只需要html和css就可以搞定啦首先:<input class="layui-input" id="test1" placeholder= ...
Eclipse自定义启动画面和状态栏图标以及各种小图标的含义
一. 启动画面自定义第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...
html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...

阿里字体小图标的使用

阿里字体小图标的使用相关推荐

最新文章

热门文章