下面是关于“详解mpvue小程序中怎么引入iconfont字体图标”的完整攻略。
步骤一:创建iconfont项目
1.进入iconfont官网,创建一个项目。
2.选择你所需要的字体图标并添加到购物车,然后通过购物车下载所需要的字体文件。
3.解压字体文件,将其中的iconfont.ttf
文件拷贝到src
目录下的common
文件夹中。
步骤二:配置webpack
1.安装相应的依赖
npm install url-loader file-loader --save-dev
2.在build/webpack.base.conf.js
文件中添加以下配置
module: {
rules: [
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
outputPath: 'static/fonts/',
publicPath: '/static/fonts/'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[hash:7].[ext]',
outputPath: 'static/img/',
publicPath: '/static/img/'
}
}
]
}
步骤三:添加字体图标样式
1.在static/css
文件夹中新建一个iconfont.css
文件。
2.在文件中添加以下样式来定义图标的基本样式。
@font-face {
font-family: 'iconfont';
src: url('./fonts/iconfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
步骤四:在项目中引用图标
1.在需要使用图标的地方,添加以下代码即可引用:“uni-icon iconfont icon-xxxxx”,其中xxxxx为Iconfont官网上对应图标的名字,如下面的代码显示了如何引入一个close图标。
<template>
<view>
<text>这是一个按钮</text>
<uni-icon class="iconfont icon-close"></uni-icon>
</view>
</template>
<script>
export default {
name: 'Demo'
}
</script>
<style>
/* 定义iconfont图标的样式 */
@import "../../static/css/iconfont.css";
</style>
2.在style
标签中@import
引用定义好的图标样式。
/* 引用iconfont图标的样式 */
@import "../../static/css/iconfont.css";
通过以上攻略,你就可以在mpvue的小程序中引入Iconfont字体图标了。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解mpvue小程序中怎么引入iconfont字体图标 - Python技术站