1. 查看ttf字体图标对应的Unicode编码
(1) 获取字体文件至本地
(2) 双击 .ttf 字体文件，选择”安装字体“。
安装字体文件.png
(3) 查看模式选择为铺开查看所有，将鼠标悬停在需要查看的图标上，即可查看文字图标所对应的Unicode编码。
查看.png
(4) 使用字体图标(远程图标)
<template>
<view>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon"></text>
<text class="list-text">固件升级</text>
<text class="navigat-arrow"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
@font-face {
font-family: texticons;
font-weight: normal;
font-style: normal;
src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
}
.list-icon {
width: 40upx;
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #888;
text-align: center;
font-family: texticons;
margin-right: 20upx;
}
.navigat-arrow {
height: 90upx;
width: 40upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
text-align: right;
font-family: texticons;
}
.center-list {
background-color: #FFFFFF;
margin-top: 20upx;
width: 750upx;
flex-direction: column;
}
.center-list-item {
height: 90upx;
width: 750upx;
box-sizing: border-box;
flex-direction: row;
padding: 0upx 20upx;
}
.list-text {
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
flex: 1;
text-align: left;
}
使用字体图标.png
2. 自定义图标库
2.1 下载自定义图标到本地并使用
阿里有个矢量图标库，图标很丰富，我们可以从阿里巴巴矢量图标库中下载需要的图标，下载后会自动生成.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
2.2 使用远程自定义字体图标
(1) 将所需图标加入购物车
(2) 在购物车页面将图标添加到自定义的项目
image.png
(3) 在项目中查看字体图标对应的Unicode、Font class和Symble
image.png
(4) 获取生成的@font-face
image.png
(5) 使用远程字体图标
- 示例1
<template>
<view>
<view class="center-list">
<view class="center-list-item">
<text class="list-icon"></text>
<text class="list-text">统计</text>
<text class="navigat-arrow"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
onLoad() {
}
}
</script>
<style>
@font-face {
font-family: 'iconfont'; /* project id 2042078 */
src: url('//at.alicdn.com/t/font_2042078_rs7tkf5c1yb.eot');
src: url('//at.alicdn.com/t/font_2042078_rs7tkf5c1yb.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2042078_rs7tkf5c1yb.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2042078_rs7tkf5c1yb.woff') format('woff'),
url('//at.alicdn.com/t/font_2042078_rs7tkf5c1yb.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2042078_rs7tkf5c1yb.svg#iconfont') format('svg');
}
.list-icon {
width: 40upx;
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #888;
text-align: center;
font-family: "iconfont" !important;
margin-right: 20upx;
}
.navigat-arrow {
height: 90upx;
width: 40upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
text-align: right;
font-family: "iconfont" !important;
}
.center-list {
background-color: #FFFFFF;
margin-top: 20upx;
width: 750upx;
flex-direction: column;
}
.center-list-item {
height: 90upx;
width: 750upx;
box-sizing: border-box;
flex-direction: row;
padding: 0upx 20upx;
}
.list-text {
height: 90upx;
line-height: 90upx;
font-size: 34upx;
color: #555;
flex: 1;
text-align: left;
}
</style>
- 示例2
<template>
<view class="cu-item uni-flex justify-center align-center" v-for="(item,index) in boardList" :key="index">
<view class="shape-board">
<view class="icon-board" :class="['text-' + item.color]"></view>
<text style="color: #FFFFFF;font-size: 20upx;">{{item.name}}</text>
</view>
</view>
</template>
<script>
var _self;
export default {
data() {
return {
boardList: [{
bid: "1",
color: 'red',
name: '汇总看板'
}, {
bid: "2",
color: 'yellow',
name: '机器看板'
}, {
bid: "3",
color: 'olive',
name: '生产看板一'
}, {
bid: "4",
color: 'olive',
name: '生产看板二'
}]
}
},
onLoad:function(){
},
methods: {
}
}
</script>
<style>
@font-face {
font-family: 'iconfont'; /* project id 2042078 */
src: url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.eot');
src: url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.woff') format('woff'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.svg#iconfont') format('svg');
}
.icon-board{
font-family: "iconfont" !important;
font-size: 50upx;
/* color: #FFFFFF; */
}
</style>
- 示例3
<template>
<view class="cu-item uni-flex justify-center align-center" v-for="(item,index) in boardList" :key="index">
<view class="shape-board">
<view class="icon-board" :class="['text-' + item.color]"></view>
<text style="color: #FFFFFF;font-size: 20upx;">{{item.name}}</text>
</view>
</view>
</template>
<script>
var _self;
export default {
data() {
return {
boardList: [{
bid: "1",
color: 'red',
name: '汇总看板'
}, {
bid: "2",
color: 'yellow',
name: '机器看板'
}, {
bid: "3",
color: 'olive',
name: '生产看板一'
}, {
bid: "4",
color: 'olive',
name: '生产看板二'
}]
}
},
onLoad:function(){
},
methods: {
}
}
</script>
<style>
@font-face {
font-family: 'iconfont'; /* project id 2042078 */
src: url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.eot');
src: url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.woff') format('woff'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2042078_9la6pb2q0ta.svg#iconfont') format('svg');
}
/* .icon-board{
font-family: "iconfont" !important;
font-size: 50upx;
color: #FFFFFF;
} */
[class*="icon-"] {
font-family: "iconfont" !important;
font-size: 50upx;
/* color: #FFFFFF; */
}
.icon-board:before {
content: "\e604";
}
</style>
注意事项
问题1：使用加载远程CSS文件的方式时，在浏览器上测试图标显示正常，安卓机上测试所有图标不显示也不报错。
-
解决：名字冲突问题， 由于网络引入的css中，font-family无法修改名称，因此，可修改字体名称，不要叫iconfont，改个其它的名字就好。
image.png 问题2：字体图标在H5端显示正常，但是app端不能正常显示
原因（在线引用需完整地址）：引用在线连接css文件时没有加上 http 协议，虽然在本地模拟有效果，但是在真机运行的时候会不显示。
解决：url地址写全即可
@font-face {
font-family: 'iconfont'; /* project id 2042078 */
src: url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.eot');
src: url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.woff') format('woff'),
url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.svg#iconfont') format('svg');
}
