前端技术杂谈 | 小程序使用iconFront字体图标——超简单

小程序使用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.显示效果