hzdyjs/docs/开发文档/移动端iconfont图标使用指南.md

移动端 iconfont 图标使用指南

📋 概述

本项目已集成 iconfont.cn 图标字体库，提供丰富的矢量图标，替代 emoji 和 uview-plus 图标，确保跨平台兼容性。

🎯 解决的问题

• uview-plus 图标显示异常：u-icon 组件在某些环境下显示为横线
• emoji 兼容性问题：不同设备和系统 emoji 显示效果不一致
• 图标扩展性：iconfont 提供更丰富的图标选择

📦 安装配置

1. 字体文件配置

文件位置：mobile/src/static/fonts/iconfont.css

@font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/c/font_4793979_9m3yqql3ybj.woff2?t=1704153600') format('woff2'), url('//at.alicdn.com/t/c/font_4793979_9m3yqql3ybj.woff?t=1704153600')
            format('woff'),
        url('//at.alicdn.com/t/c/font_4793979_9m3yqql3ybj.ttf?t=1704153600') format('truetype');
}

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

2. 全局引入

文件位置：mobile/src/main.js

// 导入 iconfont 样式
import '@/static/fonts/iconfont.css';

🎨 可用图标列表

基础图标

图标	类名	说明	编码
👤	icon-user	用户	\e7ae
🔒	icon-lock	锁定	\e60e
👁️	icon-eye	显示密码	\e61c
🙈	icon-eye-close	隐藏密码	\e61d

操作图标

图标	类名	说明	编码
🚪	icon-login	登录	\e612
🔍	icon-search	搜索	\e6b4
➕	icon-add	添加	\e6a4
✅	icon-check	确认	\e6a8
❌	icon-close	关闭	\e6a9

导航图标

图标	类名	说明	编码
🏠	icon-home	首页	\e65e
💬	icon-message	消息	\e6a7
⚙️	icon-setting	设置	\e6b8
➡️	icon-arrow-right	箭头右	\e6a3

联系图标

图标	类名	说明	编码
📞	icon-phone	电话	\e69a
📧	icon-mail	邮箱	\e692

🚀 使用方法

1. 基础用法

<template>
    <!-- 基础图标 -->
    <text class="iconfont icon-user"></text>
    <text class="iconfont icon-lock"></text>

    <!-- 带样式的图标 -->
    <text class="iconfont icon-home custom-icon"></text>
</template>

<style>
.custom-icon {
    font-size: 24px;
    color: #5d87ff;
}
</style>

2. 登录表单中的应用

<template>
    <view class="input-group">
        <!-- 用户名输入框 -->
        <text class="iconfont icon-user input-icon"></text>
        <input class="login-input" type="text" placeholder="账号" />
    </view>

    <view class="input-group">
        <!-- 密码输入框 -->
        <text class="iconfont icon-lock input-icon"></text>
        <input class="login-input" type="password" placeholder="密码" />
    </view>

    <!-- 登录按钮 -->
    <button class="login-btn">
        <text class="iconfont icon-login"></text>
        <text>登录</text>
    </button>
</template>

<style lang="scss">
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    font-size: 18px;
    color: #b0b8c9;
}

.login-input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 44px;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    background: #fff;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #5d87ff;
    color: #fff;
}
</style>

3. 动态图标切换

<template>
    <view class="password-toggle">
        <text
            :class="['iconfont', showPassword ? 'icon-eye-close' : 'icon-eye']"
            @click="togglePassword"
        ></text>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showPassword: false,
        };
    },
    methods: {
        togglePassword() {
            this.showPassword = !this.showPassword;
        },
    },
};
</script>

🎨 样式自定义

1. 基础样式属性

.iconfont {
    /* 字体大小 */
    font-size: 16px;

    /* 颜色 */
    color: #333;

    /* 其他样式 */
    opacity: 0.8;
    transition: all 0.3s ease;
}

2. 响应式设计

/* 小屏幕 */
@media (max-width: 375px) {
    .iconfont {
        font-size: 14px;
    }
}

/* 大屏幕 */
@media (min-width: 768px) {
    .iconfont {
        font-size: 20px;
    }
}

3. 主题适配

/* 亮色主题 */
.light-theme .iconfont {
    color: #333;
}

/* 暗色主题 */
.dark-theme .iconfont {
    color: #fff;
}

🔧 扩展图标

1. 从 iconfont.cn 添加新图标

1. 访问项目：打开 iconfont.cn 的项目页面
2. 选择图标：浏览并添加需要的图标到项目
3. 生成代码：下载新的字体文件和 CSS 代码
4. 更新项目：替换 iconfont.css 中的字体链接和图标类名

2. 图标命名规范

/* 建议的命名格式 */
.icon-[功能]-[状态]

例如：
.icon-user          /* 用户图标 */
.icon-eye-open      /* 眼睛打开 */
.icon-eye-close     /* 眼睛关闭 */
.icon-arrow-left    /* 左箭头 */
.icon-arrow-right; /* 右箭头 */

📱 演示页面

页面位置：mobile/src/pages/iconfont-demo/index.vue

访问路径：/pages/iconfont-demo/index

演示页面包含：

• 所有可用图标的预览
• 图标分类展示（基础、操作、导航、联系）
• 使用代码示例
• 自定义样式演示

⚠️ 注意事项

1. 兼容性

• ✅ 支持平台：H5、微信小程序、App、支付宝小程序
• ✅ 浏览器支持：Chrome、Safari、Firefox、Edge
• ✅ 设备支持：iOS、Android、HarmonyOS

2. 性能优化

/* 字体预加载 */
.iconfont {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

3. 缓存策略

• 字体文件使用 CDN 加载，自动缓存
• 本地 CSS 文件确保离线可用
• 建议定期更新字体链接时间戳

4. 回退方案

<template>
    <!-- 图标 + 文字回退 -->
    <view class="icon-with-fallback">
        <text class="iconfont icon-user"></text>
        <text class="icon-fallback">用户</text>
    </view>
</template>

<style>
.icon-fallback {
    display: none;
}

/* 当字体加载失败时显示文字 */
@font-face {
    font-family: 'iconfont-fallback';
    src: local('Arial'), local('sans-serif');
}

.iconfont:before {
    font-family: 'iconfont', 'iconfont-fallback';
}
</style>

📚 相关文件

• 样式文件：mobile/src/static/fonts/iconfont.css
• 演示页面：mobile/src/pages/iconfont-demo/index.vue
• 登录页面：mobile/src/pages/login/index.vue
• 配置文件：mobile/src/main.js

🎯 最佳实践

1. 统一使用：项目中统一使用 iconfont，避免混用多种图标方案
2. 语义化命名：使用有意义的类名，便于维护
3. 适当大小：根据使用场景选择合适的字体大小
4. 颜色一致：遵循设计规范，保持图标颜色的一致性
5. 性能考虑：避免一次性加载过多不使用的图标

📝 更新日志

• 2025-07-01：初始版本，集成 iconfont 字体库
• 预计扩展：根据业务需求持续添加新图标

---

维护者：移动端开发团队
更新时间：2025-07-01