From 05fd135b3c7c173ab924bd95f1a6b4d7dc603419 Mon Sep 17 00:00:00 2001 From: lip <1040791966@qq.com> Date: Thu, 30 Oct 2025 20:32:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/components/index-one.vue | 6 ++ static/iconfont/README.md | 57 ------------------ static/iconfont/demo_index.html | 52 +++++++++++++++- static/iconfont/iconfont.css | 14 ++++- static/iconfont/iconfont.js | 1 + static/iconfont/iconfont.json | 14 +++++ static/iconfont/iconfont.ttf | Bin 4180 -> 4812 bytes static/iconfont/iconfont.woff | Bin 2868 -> 3304 bytes static/iconfont/iconfont.woff2 | Bin 2292 -> 2708 bytes .../dist/dev/mp-weixin/project.config.json | 33 ++++++---- 10 files changed, 101 insertions(+), 76 deletions(-) delete mode 100644 static/iconfont/README.md create mode 100644 static/iconfont/iconfont.js diff --git a/pages/index/components/index-one.vue b/pages/index/components/index-one.vue index f01a469..6ff3580 100644 --- a/pages/index/components/index-one.vue +++ b/pages/index/components/index-one.vue @@ -118,6 +118,12 @@ AI智能面试 + + + + + 高校毕业生智慧就业服务 + diff --git a/static/iconfont/README.md b/static/iconfont/README.md deleted file mode 100644 index 41f6365..0000000 --- a/static/iconfont/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# 阿里图标库文件说明 - -## 📁 目录结构 - -将从阿里图标库下载的文件放在这个目录下: - -``` -static/iconfont/ -├── iconfont.css ← CSS 样式文件 -├── iconfont.ttf ← 字体文件(TrueType) -├── iconfont.woff ← 字体文件(Web Open Font Format) -├── iconfont.woff2 ← 字体文件(Web Open Font Format 2.0,推荐) -└── README.md ← 本说明文件 -``` - -## 📝 使用步骤 - -### 1. 下载图标文件 -1. 访问 https://www.iconfont.cn/ -2. 登录并选择/创建项目 -3. 添加需要的图标 -4. 点击"下载至本地" - -### 2. 复制文件 -将下载包中的以下文件复制到本目录: -- `iconfont.css` -- `iconfont.ttf` -- `iconfont.woff` -- `iconfont.woff2` - -### 3. 修改 CSS 路径 -打开 `iconfont.css`,将字体文件路径修改为: - -```css -@font-face { - font-family: "iconfont"; - src: url('./iconfont.woff2') format('woff2'), - url('./iconfont.woff') format('woff'), - url('./iconfont.ttf') format('truetype'); -} -``` - -### 4. 在 App.vue 中引入 -已在 `App.vue` 中自动引入,无需额外操作。 - -## ⚠️ 注意事项 - -1. **必须使用本地文件**:微信小程序不支持在线字体链接 -2. **路径必须正确**:确保字体文件路径指向正确位置 -3. **文件完整性**:确保所有字体文件都已复制 -4. **版本更新**:更新图标时替换所有文件 - -## 🔗 相关链接 - -- [阿里图标库](https://www.iconfont.cn/) -- [使用文档](../../docs/阿里图标库引入指南.md) - diff --git a/static/iconfont/demo_index.html b/static/iconfont/demo_index.html index a72623b..a34d73f 100644 --- a/static/iconfont/demo_index.html +++ b/static/iconfont/demo_index.html @@ -54,6 +54,18 @@
    +
  • + +
    gxbys
    +
    &#xe63f;
    +
  • + +
  • + +
    个人中心
    +
    &#xe60f;
    +
  • +
  • 素质测评
    @@ -120,9 +132,9 @@
    @font-face {
       font-family: 'iconfont';
    -  src: url('iconfont.woff2?t=1760941852498') format('woff2'),
    -       url('iconfont.woff?t=1760941852498') format('woff'),
    -       url('iconfont.ttf?t=1760941852498') format('truetype');
    +  src: url('iconfont.woff2?t=1761826914823') format('woff2'),
    +       url('iconfont.woff?t=1761826914823') format('woff'),
    +       url('iconfont.ttf?t=1761826914823') format('truetype');
     }
     

    第二步:定义使用 iconfont 的样式

    @@ -148,6 +160,24 @@
      +
    • + +
      + gxbys +
      +
      .icon-Graduation-simple- +
      +
    • + +
    • + +
      + 个人中心 +
      +
      .icon-gerenzhongxin +
      +
    • +
    • @@ -247,6 +277,22 @@
        +
      • + +
        gxbys
        +
        #icon-Graduation-simple-
        +
      • + +
      • + +
        个人中心
        +
        #icon-gerenzhongxin
        +
      • +