uni-app使用iconfont字体图标

先iconfont选择好自己需要的图标 添加至项目 下载字体文件到本地

uni-app使用iconfont字体图标_第1张图片

将下载的文件解压缩到工程目录static文件夹下

uni-app使用iconfont字体图标_第2张图片

定义好iconfont.css文件的@font-face声明,修改好引入的url地址

uni-app使用iconfont字体图标_第3张图片

打开App.vue文件 ,引入static下刚才修改的iconfont.css字体图标文件

uni-app使用iconfont字体图标_第4张图片

完成上线的步骤后就可以全局使用字体图标了

uni-app使用iconfont字体图标_第5张图片

            <view class="search">
                <input type="text" v-model="searchName" placeholder-style="color:#c8c8c8;z-index:0;" placeholder="搜索">
                <span class="iconfont icon-fenxiang"></span>
                <span class="iconfont icon-close"></span>
            </view>

uni-app使用iconfont字体图标_第6张图片

你可能感兴趣的:(uni-app)