hookehuyr

feat: 添加 Font Awesome 支持并重构图标渲染逻辑

- 引入 Font Awesome 4.7.0 CSS 文件以扩展图标库
- 更新导航项图标配置,将“地图导览”图标从自定义字体替换为 Font Awesome 图标
- 重构 Vue 组件中的图标渲染逻辑,新增 `getIconClass` 函数动态判断图标类型并应用对应 CSS 类
- 调整相关样式类名以保持一致性
...@@ -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;
......
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 }
......