小程序使用iconFront字体图标——超简单

前言

​ 本来是一个后台开发，这两年小程序太火了，最近尝试了一下小程序，发现入门挺简单的，像我这种没有一点前端开发经验的在网上搜点资料，花一天左右就能开发个简单的小程序。以上只是我开发小程序过程的一些感想，今天重点是想分享一下学到新知识——矢量图在小程序的应用

矢量图

首先我在学习小程序之前对于矢量图是一无所知的(半道出家的伪程序员)，这里介绍下矢量图的概念（百度的）：在计算机的世界里，图形一般可以分为两大类：位图和矢量图 位图：最常见的位图就是平常生活拍照生成的照片，这种图片放大后是会变得模糊不清。矢量图：矢量图的一个特点是与分辨率无关，这就意味着在任何标准的显示设备上都可以保持原有的清晰度

矢量图资源

阿里有一个通过矢量图标库 iconfont，网站有几十万图标，可以满足一般小程序的开发。

矢量图在程序中的应用

1.注册(这一步自己操作)

2.找到自己想要的图标(这里随便找了一个图标)

3.放到购物车(不收费的)

4.右上角点出购物车栏，选择下载代码

5.下载后是一个名称为download.zip的压缩包

6.解压打开iconfont.css的文件，如下：

@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1558448748981'); /* IE9 */ src: url('iconfont.eot?t=1558448748981#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKMAAsAAAAABkgAAAJCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApUZQE2AiQDCAsGAAQgBYRtBzAbiwXILrBt2JNAhQIKTYL7Y8GDAPHwtR/7c3cX1aSaGKJoVskkhlC8kiAGK+lbFw39Lb9f24mXsn7n0QQ8ef6y98X3hyU8hQuJVKCZhEakcaJY9SUBwFcpBClwOO0CBXIHlNs9h88FTDDA8x5FViChN4xd8AKPE2g0oCGzub57AGWFPS4QV46lQbngUxSWrBdqG5YW8aJGfXpKj3iOvh//zEeZpCazy3Yu10yY/lxz0vJj9dhFQOAnoNU1yJgDCnHQGNuSE4yW07g+bwQoiuDnqsIGcVStYH+dXdgM+mA8+NkTPGphAiVJdAFjmFquTc11N8/fDz79OPzy6/jzz4vGfDA+rg3lrr5BzH84miH0RdmE1dM8Pr68Zb2fCV7z6v9ti//lWgHf1P1oRPUI8iPqd2MPfgd/YEsxhLY+FY3f6Ei6Jo1NaNSICnZ1+p2q6jl3KtTruQNHnf7MktXrfEgs1DnUaLKAWvVW0GjWxuomXVhOlAbMuAcI7R6QtPpA1u6JWKg/qNHrD7XaI4dGR9G1ZZOJcKobTJqQifoFOkYUKtco1bh4j6wTX+O8MKIfEadOELutTjm5QSHxEjPSU6snolBxFOA6OI18P8KYI5cMadkicb/dVk1vahlRAFUbGNEIYkK6C8hhiIRU0F1UK5/fQywnfBruqKhzHiEs5fSOulo6A4gbsnBQxaO8kjpl6RFCQQqLBNA6GER8vgiKmwe5iEG02BMisb6200kNlbW2VwQ/kMtqsNUpnH5Z7fVJoBMDAA==') format('woff2'), url('iconfont.woff?t=1558448748981') format('woff'), url('iconfont.ttf?t=1558448748981') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1558448748981#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: "\e641"; }

7.把iconfont.css的内容复制到小程序页面wxss里，如下

wxss文件：

@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1558448748981'); /* IE9 */ src: url('iconfont.eot?t=1558448748981#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKMAAsAAAAABkgAAAJCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApUZQE2AiQDCAsGAAQgBYRtBzAbiwXILrBt2JNAhQIKTYL7Y8GDAPHwtR/7c3cX1aSaGKJoVskkhlC8kiAGK+lbFw39Lb9f24mXsn7n0QQ8ef6y98X3hyU8hQuJVKCZhEakcaJY9SUBwFcpBClwOO0CBXIHlNs9h88FTDDA8x5FViChN4xd8AKPE2g0oCGzub57AGWFPS4QV46lQbngUxSWrBdqG5YW8aJGfXpKj3iOvh//zEeZpCazy3Yu10yY/lxz0vJj9dhFQOAnoNU1yJgDCnHQGNuSE4yW07g+bwQoiuDnqsIGcVStYH+dXdgM+mA8+NkTPGphAiVJdAFjmFquTc11N8/fDz79OPzy6/jzz4vGfDA+rg3lrr5BzH84miH0RdmE1dM8Pr68Zb2fCV7z6v9ti//lWgHf1P1oRPUI8iPqd2MPfgd/YEsxhLY+FY3f6Ei6Jo1NaNSICnZ1+p2q6jl3KtTruQNHnf7MktXrfEgs1DnUaLKAWvVW0GjWxuomXVhOlAbMuAcI7R6QtPpA1u6JWKg/qNHrD7XaI4dGR9G1ZZOJcKobTJqQifoFOkYUKtco1bh4j6wTX+O8MKIfEadOELutTjm5QSHxEjPSU6snolBxFOA6OI18P8KYI5cMadkicb/dVk1vahlRAFUbGNEIYkK6C8hhiIRU0F1UK5/fQywnfBruqKhzHiEs5fSOulo6A4gbsnBQxaO8kjpl6RFCQQqLBNA6GER8vgiKmwe5iEG02BMisb6200kNlbW2VwQ/kMtqsNUpnH5Z7fVJoBMDAA==') format('woff2'), url('iconfont.woff?t=1558448748981') format('woff'), url('iconfont.ttf?t=1558448748981') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1558448748981#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: "\e641"; } /* 注意：上面是拷贝的iconfont.css文件全部代码，下面是自己设置的button属性 */ .cubtn { position: relative; border: 0rpx; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 30rpx; font-size: 28rpx; height: 64rpx; line-height: 1; text-align: center; text-decoration: none; overflow: visible; margin-left: initial; transform: translate(0rpx, 0rpx); margin-right: initial; left: 40vw; } .cubtn::after{ display: none; } .cubtn.icon{ width: 20vw; height: 20vw; border-radius: 500rpx; padding: 0; } .icon-number{ font-size:20vw; }

wxml文件

<button class="cubtn icon"> <view class="iconfont icon-number"></view> </button>

8.显示效果