引言
在前端开发中，视觉效果和用户体验是至关重要的，而图标的使用不仅能够提升界面的美观性，还能增强用户的交互感。本文将系统地介绍如何从阿里巴巴下载矢量图标并通过 iconfont 实现图标的灵活应用。
icon
iconfont
阿里巴巴 矢量图 下载的操作
1，先找到需要的图标，然后加入购物车
2，创建一个项目 存储，
3，选择想要 的类型，然后下载到本地，到此，图标下载完成
得到链接
将font.css 文件放入到项目中，然后加https
@font-face { font-family: 'iconfont'; /* Project id 4696905 */ src: url('https://at.alicdn.com/t/c/font_4696905_q7brt7dnarb.woff2?t=1727345665159') format('woff2'), url('https://at.alicdn.com/t/c/font_4696905_q7brt7dnarb.woff?t=1727345665159') format('woff'), url('https://at.alicdn.com/t/c/font_4696905_q7brt7dnarb.ttf?t=1727345665159') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-xing:before { content: "\e8d6"; }
然后在app.vue 里面引用
@import '/static/iconfont.css';
两种使用方法
然后使用
需要查看在线链接，都不一样 复制过去之后记得加上https://
两种使用方式
图片
```Plain Text <template> <view> <img :src="img1" alt="Icon"> </view> </template> <script setup lang="ts"> import img from "../../static/icon/biaopan.png"; // 直接使用 img 作为 src const img1 = img; console.log(img1); </script> ```
修改tabber
"tabBar": { // 这里就是配置tabbar的地方 "color": "#8a8a8a", // 导航栏字体颜色 "selectedColor": "#d4237a", // 选中后字体的颜色 "borderStyle": "black", // 底部的border颜色，只能是“black”或者“white” "backgroundColor": "#ffffff", // 底部背景颜色 "list": [{ "pagePath": "pages/index/index", // 页面路径 "text": "首页", // 底部导航文字, "iconPath": "static/logo.png", // 没选中前的图标路径 "selectedIconPath": "static/logo.png" // 选中后的图标路径 }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png" } ] }
.uni-tabbar { // tab 样式 // 背景色 background-color: rgba(57, 181, 74, 0.1) !important; // tabBar 样式 // 上边框 .uni-tabbar-border { background-color: #e54d42 !important; // tabBar 上边框的颜色 } .uni-tabbar__item { // tabBar 单项样式 height: 100rpx !important; &:not(:last-child) { border-right: 4rpx solid #eee; } .uni-tabbar__icon { // tabBar 图标样式 width: 40rpx !important; height: 40rpx !important; } .uni-tabbar__label { // tabBar 文字样式 // color:yellow !important } } }
uni-ui
导入使用
选择去导入
选择下载并导入到hb
然后在page.json
// pages.json { "easycom": { "autoscan": true, "custom": { // uni-ui 规则如下配置 "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } }, // 其他内容 pages:[ // ... ] }
popup
简单弹出
<template> <view class="body"> <button type="default" @click="open">click me</button> <uni-popup mask-background-color="#9c9c9c" safe-area ref="popup" type="center" :animation="true" :mask-click="false" background-color="#fff"> <text>Popup</text> <uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message> <button @click="close">关闭</button> </uni-popup> </view> </template> <script setup lang="ts"> import {ref} from "vue" const popup= ref("") const open = () => { popup.value.open() } const close = ()=>{ popup.value.close() } </script> <style lang="scss"> .test{ color:#9c9c9c; } </style>
input
输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，clearable 属性设置为 false 即可
设置 prefixIcon 属性来显示输入框的头部图标
设置 suffixIcon 属性来显示输入框的尾部图标
注意图标当前只支持 uni-icons 内置的图标，当配置 suffixIcon 属性后，会覆盖 :clearable="true" 和 type="password" 时的原有图标
绑定 @iconClick 事件可以触发图标的点击 ，返回 prefix 表示点击左侧图标，返回 suffix 表示点击右侧图标
