首页uniapp自定义图标使用

uniapp自定义图标使用

时间: 2025-08-21 16:49:40 浏览: 5

### 如何在 UniApp 中添加和使用自定义图标 #### 添加自定义图标文件为了在 UniApp 项目中引入自定义图标，需先将 `iconfont.css` 和 `iconfont.ttf` 文件导入至项目内。推荐的做法是把这些资源放置于项目的 `static` 目录之下[^1]。 ```css /* static/iconfont.css */ @font-face { font-family: 'iconfont'; src: url('/https/wenku.csdn.net/static/iconfont.ttf') format('truetype'); } ``` #### 使用自定义图标当准备就绪之后，在 HTML 或 Vue 组件模板里利用这些图标的前提是确保给定元素拥有特定的 CSS 类名组合。具体来说，每一个应用了自定义图标的 DOM 节点都应当被赋予两个类名：“iconfont”，以及代表该图标唯一性的 “icon-*” 形式的附加类名[^2]。 ```html  <i class="iconfont icon-example"></i> ``` 对于某些组件库中的特殊组件，比如 uView 的 `<u-input>` 输入框，可以通过设置属性来指定前置图标路径。例如： ```vue <template> <view>  <u-input v-model="username" clearable placeholder="请输入用户名" prefix-icon="/static/login/user.png"/> </view> </template> <script> export default { data() { return { username: '' } }, }; </script> ``` 针对导航栏按钮上的自定义图标，则需要注意 Unicode 表示法的要求。“\u” 是必需的前缀字符用于区分其他形式的文字编码[^4]。 ```javascript // Navigation bar button click event handler onNavigationBarButtonTap(e) { if (e.index === 0 && e.text === '\ue606') { console.log('Left top corner icon clicked') } }, ```

阅读全文