iconfont—阿里图标的使用

阿里图标库为我们提供了许多丰富精美的图标，可以通过代码引入的方式将图标库引入到我们的项目中，用来美化我们的界面。iconfont 的使用方式有以下几种：

方式一：font-class 在线引入

打开网址进入首页，输入我们想要的图标名称进行搜索：

选择自己喜欢的图标加入购物车：

把图标添加到我的项目中，点击生成的链接：

复制生成的 url 链接，在项目中引入：在样式配置文件（base.css）中引入 url

@import url(https://at.alicdn.com/t/font_3378667_8almgd1m3b.css?spm=a313x.7781069.1998910419.100&file=font_3378667_8almgd1m3b.css);

复制图标代码，通过属性控制 class="iconfont icon-zhuye"

<template>
<div id="app"><h2>阿里图标库的测试</h2><li class="iconfont icon-zhuye"></li>
</div>
</template>

能够成功显示，则代表引入成功。需要注意的是，这种方式只能引入加载到项目中的图标，后续添加新的图标或者对图标进行的任何修改，都需要更新 url 链接来更新图标库。

方式二：本地加载

将以上 url 链接的网页内容复制粘贴到 css文件中，通过本地引入的方式进行加载

@font-face {font-family: "iconfont"; /* Project id 3378667 */src: url('//at.alicdn.com/t/font_3378667_mzmh78ddbcr.woff2?t=1651755937648') format('woff2'),url('//at.alicdn.com/t/font_3378667_mzmh78ddbcr.woff?t=1651755937648') format('woff'),url('//at.alicdn.com/t/font_3378667_mzmh78ddbcr.ttf?t=1651755937648') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-shanchu:before {content: "\e600";
}.icon-fenxiang-copy:before {content: "\e632";
}.icon-bianjixiugai-copy:before {content: "\e634";
}.icon-tubiao:before {content: "\e659";
}.icon-zhuye:before {content: "\e606";
}

main.js

import './css/iconfont.css'

这种方式仍然有效。

iconfont—阿里图标的使用相关推荐

vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
1.登录阿里图标官网 2.注册自己的账户,创建项目 3.加入自己使用的图标,加入购物车 4.选中项目 5.选中引入方式: 第一种.使用统一码 Unicode 第二种.使用class Font clas ...
vue前端项目引入iconfont阿里图标（font class）
1.首先进入阿里图标库官网(iconfont-阿里巴巴矢量图标库),选取你所要的图标,将其添加购物车. 2.然后进入购物车,点击添加进项目 3.点击下载到本地 4.将下载的文件复制下来 5.在main ...
优秀工具介绍之——Iconfont 阿里图标库
阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用. 官网地址: h ...
vue中通过在线链接使用iconfont阿里图标库FontClass
看项目原来的都是将图标下载到本地,然后引入css文件.查了些文章也都是介绍的,先将图标下载到本地再导入. 那么在项目开发中,时不时就会需要加入新的图标.这时候每次都要重新将图标下载到本地再导入.觉得十 ...
iconfont阿里图标使用方法（Font Class用法）
1.先去iconfont官网下载图标选图标加入购物车 2.从购物车里下载代码(或者png.svg看需求) 3.下载解压后会有一个这样的文件夹把这三个文件重新创建一个文件夹放到项目的文件夹里(主 ...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
react中通过Antd使用阿里图标
react中通过Antd使用iconfont阿里图标安装依赖组件中引入安装依赖 npm install --save @ant-design/icons 组件中引入 **//从antd中引入fo ...
开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

iconfont—阿里图标的使用

iconfont—阿里图标的使用相关推荐

最新文章

热门文章