阿里巴巴矢量图标库icon图标在线引用

阿里巴巴矢量图标库icon图标在线引用

写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内 具体步骤如下:
1.进入阿里巴巴矢量图标库选择需要的图标:
在这里插入图片描述
2.点击加入购物车:
在这里插入图片描述
3.点击右侧购物车:
在这里插入图片描述
4.点击购物车,点击添加项目:
在这里插入图片描述
5.将代码复制到页面 页面调用时直接调用编号即可:
在这里插入图片描述

### 如何在 Vue 项目中引入和使用阿里巴巴矢量图标库 #### 方法一:通过 Unicode 方式使用图标 可以采用 Unicode 编码的方式来使用 Alibaba Vector Icon Library (Iconfont) 中的图标。这种方式需要先完成以下步骤: 1. 登录并访问 [Alibaba Vector Icons](https://www.iconfont.cn/) 平台,创建一个新的项目或者选择已有的项目。 2. 将所需的图标加入购物车,并将其添加到所选项目中[^3]。 3. 下载项目的压缩包,在解压后的 `demo_index.html` 文件中查看每种图标的 Unicode 值以及对应的 HTML 实现方法。 接着在 Vue 项目中的具体实现如下: - 需要在全局样式文件(如 `main.js` 或者单独的 CSS 文件)里加载字体资源路径; - 使用 `<i>` 标签配合指定字符编码来展示目标图形符号。 ```javascript // main.js import '@/assets/iconfont/iconfont.css'; // 引入iconfont.css ``` 页面组件内的调用实例: ```html <i class="iconfont"></i> <!-- 替换为实际使用的unicode --> ``` #### 方法二:利用 Font Class 来应用图标 另一种常见做法就是借助类名机制定义好各个不同的图片对象关联关系之后再加以运用即可达到相同效果。同样也需要经历上述提到过的准备工作流程后再继续操作下去。 主要区别在于这里会依赖于特定前缀加上自定义名称构成最终呈现出来的视觉元素形式。 配置过程大致如下所示: ```css /* 示例 */ @font-face { font-family: 'iconfont'; src: url('...'); /* 图标字体地址 */ } .iconfont{ font-family:"iconfont" !important; speak:none; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-example:before { content: "\e90f"; } /* 对应的具体glyph codepoint */ ``` 然后就可以像这样简单地嵌套进去了: ```html <i class="iconfont icon-example"></i> ``` 另外还有一种叫做 Symbol 的模式可供选用,不过相对来说较为复杂一点而且兼容性方面可能存在问题所以不推荐初学者轻易尝试除非确实存在特殊需求场景才行。 综上所述无论是哪一种途径都能够很好地解决日常开发过程中遇到的各种各样关于图像素材方面的难题啦! --- ### 注意事项 确保正确设置相对或绝对URL指向至服务器端部署好的静态资源位置以便顺利渲染出来;同时也要记得及时更新版本号防止缓存干扰正常显示结果哦[^4]。 ```python # 如果是动态切换主题颜色等情况,则可以通过修改变量值重新编译SCSS等方式处理 $primary-color: #ff5722; body { color: $primary-color; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值