创建自己的图标库

我这里使用阿里的矢量图标库 官网：www.iconfont.cn/

1.首先需要创建一个项目

2.把你需要的图标添加到你的项目中

3.如何在项目中应用

3.1 在线引用

注意：每次添加新图标都需要重新生成在线链接

unicode 引用

• 1.项目中创建一个css文件iconfont.css,并在全局应用
• 2.把生成的在线链接代码复制到iconfont.css文件中

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: 'iconfont';
    /* Project id 4677217 */
    src: url('//at.alicdn.com/t/c/font_4677217_4q7pfxyfsxh.woff2?t=1725700228718') format('woff2'),
        url('//at.alicdn.com/t/c/font_4677217_4q7pfxyfsxh.woff?t=1725700228718') format('woff'),
        url('//at.alicdn.com/t/c/font_4677217_4q7pfxyfsxh.ttf?t=1725700228718') format('truetype');
}

• 3.定义使用iconfont的样式

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

• 4.挑选相应图标并获取字体编码，应用于页面

        <view class="iconfont">&#xe68b</view>
        <view class="iconfont">&#xe637</view>
        <view class="iconfont">&#xe646</view>

效果：

font-class 引用

• 1.复制生成的在线地址在项目全局引用

• 2.挑选相应图标并获取类名，应用于页面

    <view class="iconfont icon-home"></view>
    <view class="iconfont icon-add"></view>
    <view class="iconfont icon-share"></view>

3.2 离线引用

• 1.下载离线文件

• 2.把css文件和字体文件放到项目中并全局引用iconfont.css