阿里有个矢量图标库，图标很丰富，我们可以从阿里巴巴矢量图标库中下载需要的图标，下载后会自动生成.ttf文件，然后作为我们的自定义字体图标库。
(1) 搜索几个所需要的图标加入购物车
step1.png
(2) 在购物车页面进行下载
step2.png
(3) 下载文件解压如下
文件解压.png
-
demo_index.html文件：点击该文件打开网页，可查看字体图标对应的Unicode、Font class和Symble，即对应三种引用方式。网页信息如下：
Unicode.png
Font class.png
Symble.png
-
iconfont.css文件(层叠样式表文件)
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1585729132276'); /* IE9 */
src: url('iconfont.eot?t=1585729132276#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPQAAsAAAAAB+QAAAOEAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDSIMaATYCJAMMCwgABCAFhG0HPBvmBhFVnCvIPhbKTSd7wShSsXcWPE9t2vsMScmQitiKq5xqdM3sZrK1acc2KkKxJOfBd/kfCexwIXScr9NVqkK2wvXgcvqjxOdZlttYS8eaGGAcUEBjLwowLZCAvGHsyotYDQE0ceRDqtWo1wwLE6OTANKvd8/OWCkVZk20YCG4S0aaDWURLixjtnEJWOh/Xz5SRCwwcCmMno16VO9GpTel38xWk/5Pop2LwB7PALBxoIB8gAnSodTUChW68qHQisisD3ZjIhhjWf//B5+lStwr/eMZIG6MSC8AuaDQOCm2TYfAm9lMKOb8x4Eb8AFWAFmQGHITF4YOCgkPLeAdGzBn1Wo7cO7aNT3s7bth+fad4bLhRAm9rChx0NyVImv35rRrSGH62LWYWstHz1kGy3eFiQ5qTlpu28ez4kQmr+iXVOyJ8mvMWRbC+svF7ZUrtYfooXPvtrx7V7eQruIVjZeuaHwnbYpptuJOizu3mt26fbuybnjnvGvvHpVRd+4kb0k3vB267FbpxuvzeE+d8jo72n2cAL9gxy5b13bMGYnZh44dS/XxpFtOyp4iWb7aK5zMrknFs620ooWxLllOfLPnOJ604DSPI18CcKxL+b5nBj8j25MWlGY5wb0qZU0K30fzLEgS64TXCKvjrSvfVMc8qmreNUvWhFcNUz2flbomMz4kdV/2rG5HV2u2tPUd4B7YadLenMviK+WonrvnkNSLf7y/k+u0lXKV6g5XjbskBdZu3k0P4GrPkWX3bqcTAP8fqgOqqO/ZaJ5Xk/7ib3iz7vaCjv7lvlq2CcCDPXBuIaedBax7NAv8sxzzE4B5nnMNtTJlEbXZAijasX4j4Wg08KdiAYL49ZeEto4EwSI0BgMfYkFhkYKaxHzgwqYYuLGoCJq85ONtghGWiOkB8vACIATwBgM/skARwAc1iV9wEcYf3ATIEjQtJHhGmxxSHaoKGkUP9gmV454srR6C6CMWU2skyfVJV5SxskIcRFlvjj3KGH3GW5GoEpBwBxlYD9uWYRCu0WlQqg5pGFLZkwLH3exAVQTEoCAewPIEqHAwPeSWVw65zx9BCiZaDFJTVGG8gggjVfVATEDUAs1Ffauiazln5EZBgqIQACEwHUAGDEhruhhgKG9WgziUgLKHYyAlRKWorSiYX9I93wpAY/RQYogSE5+hhrvKbrQbU1Y0WcOzGQ==') format('woff2'),
url('iconfont.woff?t=1585729132276') format('woff'),
url('iconfont.ttf?t=1585729132276') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1585729132276#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-saomiao:before {
content: "\e639";
}
.icon-zhifubao:before {
content: "\e689";
}
-
iconfont.ttf文件：字体图标库文件，需复制到我们的项目
(4) 将iconfont.ttf文件复制static文件夹下
(5) 新建 iconfont.css 文件，引入iconfont.ttf文件
@font-face {
font-family: "iconfont";
font-weight: normal;
font-style: normal;
src: url('./static/iconfont.ttf') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-saomiao:before {
content: "\e639";
}
.icon-zhifubao:before {
content: "\e689";
}
(6) 使用自定义字体图标
- index.vue 页面中使用字体图标
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<!-- <text class="iconfont icon-saomiao"></text> -->
<text class="iconfont icon-zhifubao"></text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
备注：<text class="icon-zhifubao"></text>会导致图标不能正常显示（H5端显示个方框，App端显示方框里面打叉），原因是缺少iconfont样式。
- App.vue 引入css文件
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@import './common/iconfont.css';
</style>
(7) 页面效果如下
页面效果.png
网友评论