添加新图标

This commit is contained in:
lip
2025-10-30 20:32:31 +08:00
parent 9c22cc4444
commit 05fd135b3c
10 changed files with 101 additions and 76 deletions

View File

@@ -118,6 +118,12 @@
</view> </view>
<view class="service-title">AI智能面试</view> <view class="service-title">AI智能面试</view>
</view> </view>
<view class="service-item press-button" @click="handleServiceClick('ai-interview')">
<view class="service-icon service-icon-9">
<IconfontIcon name="Graduation-simple-" :size="32" color="#FFFFFF" />
</view>
<view class="service-title">高校毕业生智慧就业服务</view>
</view>
<view class="service-item press-button" @click="navToTestPage"> <view class="service-item press-button" @click="navToTestPage">
<view class="service-icon service-icon-10"> <view class="service-icon service-icon-10">
<uni-icons type="gear-filled" size="32" color="#FFFFFF"></uni-icons> <uni-icons type="gear-filled" size="32" color="#FFFFFF"></uni-icons>

View File

@@ -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)

View File

@@ -54,6 +54,18 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe63f;</span>
<div class="name">gxbys</div>
<div class="code-name">&amp;#xe63f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">个人中心</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe607;</span> <span class="icon iconfont">&#xe607;</span>
<div class="name">素质测评</div> <div class="name">素质测评</div>
@@ -120,9 +132,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1760941852498') format('woff2'), src: url('iconfont.woff2?t=1761826914823') format('woff2'),
url('iconfont.woff?t=1760941852498') format('woff'), url('iconfont.woff?t=1761826914823') format('woff'),
url('iconfont.ttf?t=1760941852498') format('truetype'); url('iconfont.ttf?t=1761826914823') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@@ -148,6 +160,24 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-Graduation-simple-"></span>
<div class="name">
gxbys
</div>
<div class="code-name">.icon-Graduation-simple-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gerenzhongxin"></span>
<div class="name">
个人中心
</div>
<div class="code-name">.icon-gerenzhongxin
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-suzhicepingtiku"></span> <span class="icon iconfont icon-suzhicepingtiku"></span>
<div class="name"> <div class="name">
@@ -247,6 +277,22 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-Graduation-simple-"></use>
</svg>
<div class="name">gxbys</div>
<div class="code-name">#icon-Graduation-simple-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gerenzhongxin"></use>
</svg>
<div class="name">个人中心</div>
<div class="code-name">#icon-gerenzhongxin</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-suzhicepingtiku"></use> <use xlink:href="#icon-suzhicepingtiku"></use>

View File

@@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 5044714 */ font-family: "iconfont"; /* Project id 5044714 */
src: url('iconfont.woff2?t=1760941852498') format('woff2'), src: url('iconfont.woff2?t=1761826914823') format('woff2'),
url('iconfont.woff?t=1760941852498') format('woff'), url('iconfont.woff?t=1761826914823') format('woff'),
url('iconfont.ttf?t=1760941852498') format('truetype'); url('iconfont.ttf?t=1761826914823') format('truetype');
} }
.iconfont { .iconfont {
@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-Graduation-simple-:before {
content: "\e63f";
}
.icon-gerenzhongxin:before {
content: "\e60f";
}
.icon-suzhicepingtiku:before { .icon-suzhicepingtiku:before {
content: "\e607"; content: "\e607";
} }

File diff suppressed because one or more lines are too long

View File

@@ -5,6 +5,20 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "5122382",
"name": "gxbys",
"font_class": "Graduation-simple-",
"unicode": "e63f",
"unicode_decimal": 58943
},
{
"icon_id": "6311925",
"name": "个人中心",
"font_class": "gerenzhongxin",
"unicode": "e60f",
"unicode_decimal": 58895
},
{ {
"icon_id": "28808301", "icon_id": "28808301",
"name": "素质测评", "name": "素质测评",

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -1,8 +1,7 @@
{ {
"description": "项目配置文件。", "description": "项目配置文件。",
"packOptions": { "packOptions": {
"ignore": [], "ignore": []
"include": []
}, },
"setting": { "setting": {
"urlCheck": false, "urlCheck": false,
@@ -10,20 +9,28 @@
"postcss": true, "postcss": true,
"minified": true, "minified": true,
"newFeature": true, "newFeature": true,
"bigPackageSizeSupport": true, "bigPackageSizeSupport": true
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "3.10.3", "libVersion": "3.5.7",
"appid": "wx9d1cbc11c8c40ba7", "appid": "wx9d1cbc11c8c40ba7",
"projectname": "qingdao-employment-service", "projectname": "qingdao-employment-service",
"condition": {}, "condition": {
"editorSetting": { "search": {
"tabIndent": "insertSpaces", "current": -1,
"tabSize": 2 "list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"current": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
} }
} }