feat: 添加 Font Awesome 支持并重构图标渲染逻辑
- 引入 Font Awesome 4.7.0 CSS 文件以扩展图标库 - 更新导航项图标配置,将“地图导览”图标从自定义字体替换为 Font Awesome 图标 - 重构 Vue 组件中的图标渲染逻辑,新增 `getIconClass` 函数动态判断图标类型并应用对应 CSS 类 - 调整相关样式类名以保持一致性
Showing
4 changed files
with
12 additions
and
5 deletions
| ... | @@ -9,7 +9,8 @@ | ... | @@ -9,7 +9,8 @@ |
| 9 | @tailwind base; | 9 | @tailwind base; |
| 10 | @tailwind components; | 10 | @tailwind components; |
| 11 | @tailwind utilities; | 11 | @tailwind utilities; |
| 12 | -@import "@/assets/styles/iconfont.less"; | 12 | +@import "./assets/css/font-awesome.min.css"; |
| 13 | +@import "./assets/styles/iconfont.less"; | ||
| 13 | 14 | ||
| 14 | :root { | 15 | :root { |
| 15 | --nut-primary-color: #A67939; | 16 | --nut-primary-color: #A67939; | ... | ... |
src/assets/css/font-awesome.min.css
0 → 100644
This diff is collapsed. Click to expand it.
| ... | @@ -14,7 +14,7 @@ export const getHomeContentFixture = () => ({ | ... | @@ -14,7 +14,7 @@ export const getHomeContentFixture = () => ({ |
| 14 | { | 14 | { |
| 15 | id: 'map-guide', | 15 | id: 'map-guide', |
| 16 | title: '地图导览', | 16 | title: '地图导览', |
| 17 | - icon: 'icon-jingxiuying', | 17 | + icon: 'fa-odnoklassniki-square', |
| 18 | link_url: '', | 18 | link_url: '', |
| 19 | page_url: '/pages/map-guide/index', | 19 | page_url: '/pages/map-guide/index', |
| 20 | }, | 20 | }, | ... | ... |
| ... | @@ -20,8 +20,8 @@ | ... | @@ -20,8 +20,8 @@ |
| 20 | > | 20 | > |
| 21 | <view class="nav-entry__icon-wrap"> | 21 | <view class="nav-entry__icon-wrap"> |
| 22 | <i | 22 | <i |
| 23 | - class="fa iconfont iconfont-demo" | 23 | + class="nav-entry__icon" |
| 24 | - :class="item.icon || default_icon" | 24 | + :class="getIconClass(item)" |
| 25 | ></i> | 25 | ></i> |
| 26 | </view> | 26 | </view> |
| 27 | <text class="nav-entry__title">{{ item.title }}</text> | 27 | <text class="nav-entry__title">{{ item.title }}</text> |
| ... | @@ -59,6 +59,12 @@ const image_links = ref([]) | ... | @@ -59,6 +59,12 @@ const image_links = ref([]) |
| 59 | 59 | ||
| 60 | const hasLink = (item) => !!(item?.page_url || item?.link_url) | 60 | const hasLink = (item) => !!(item?.page_url || item?.link_url) |
| 61 | 61 | ||
| 62 | +const getIconClass = (item) => { | ||
| 63 | + const icon = item?.icon || default_icon | ||
| 64 | + const font_class = icon.startsWith('fa-') ? 'fa' : 'iconfont' | ||
| 65 | + return [font_class, icon] | ||
| 66 | +} | ||
| 67 | + | ||
| 62 | const handleLinkedItemTap = (item) => { | 68 | const handleLinkedItemTap = (item) => { |
| 63 | if (!item) return | 69 | if (!item) return |
| 64 | 70 | ||
| ... | @@ -178,7 +184,7 @@ useLoad(() => { | ... | @@ -178,7 +184,7 @@ useLoad(() => { |
| 178 | line-height: 1; | 184 | line-height: 1; |
| 179 | } | 185 | } |
| 180 | 186 | ||
| 181 | - .iconfont-demo { | 187 | + .nav-entry__icon { |
| 182 | font-size: 64rpx; | 188 | font-size: 64rpx; |
| 183 | color: #98271d; | 189 | color: #98271d; |
| 184 | } | 190 | } | ... | ... |
-
Please register or login to post a comment