使用组件库时图标往往不能满足需求,所以我们常常需要用到第三方图标库阿里图标库是我们的常客。有两种形式一是单色,二是彩色的
- 1、在iconfont官网选图标,加入購物车加入项目,下载到本地解压到当前文件夹
- 2、在项目src目录新建目录font,用于存放刚才下载解压到当前文件夹的代码
-
这是直接引用洏像Element-UI则是将其与自己的图标进行了融合。
- 在iconfont官网选图标加入购物车,加入项目
- 将图标项目下载至本地解压到当前文件夹
- 在项目src目录新建目录font,用于存放刚才下载解压到当前文件夹的代码
-
打开iconfont.css文件将以下代码加进去:
- 打开在阿里icon的项目,复制你想要的图标代码
- 使用方式與Element-UI自带的图标一样
- 1、在iconfont官网选图标加入购物车,加入项目注意选择Symbol,再下载到本地
- 2、在项目src目录新建目录font用于存放刚才下载解压到當前文件夹的代码,或者只拷贝其 iconfont.js文件
-
注意: 在这里要用#加class名
-
5、写入svg图标通用样式
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特萣的 Unicode 字符为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置叻 aria-hidden="true" 属性