阿里巴巴矢量图标库使用

注册账号，创建项目，把需要的图标放入购物车，从购物车添加到项目中，之后
两种引用方式，

一是在线引用

通过预览字体可以看到在线使用教程

调节字体图标的大小是通过元素的font-size属性来控制的;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="preload" href="//at.alicdn.com/t/font_1059161_wsvf28b8h9d.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link type="text/css" rel="styleSheet"  href="//at.alicdn.com/t/font_1059161_wsvf28b8h9d.css" />
</head>
<body><div style="border: 1px solid #000;float: left;"><div style="width: 100px;height: 100px;background: #eee;float: left;"></div><i style="font-size:50px;" class='iconfont iconchaoshi'></i><span class="iconfont icontupian"></span><span class="iconfont"></span></div></body>
</html>

二是下载到本地使用，

修改：其实，把在线的引入的地址换为项目中相对路径的就可以。
注意，在react 项目中，我把下载的字体文件等放在src/common/font 文件夹下，在 public的index.html中引入不生效。之后把字体文件放在public的font文件夹下就行了。

下载后解压的文件全部放入项目中

然后引用

调节字体图标的大小是通过元素的font-size属性来控制的;
全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <link rel="preload" href="//at.alicdn.com/t/font_1059161_wsvf28b8h9d.woff2" as="font" type="font/woff2" crossorigin="anonymous"> --><!-- <link type="text/css" rel="styleSheet"  href="//at.alicdn.com/t/font_1059161_wsvf28b8h9d.css" /> --><link rel="stylesheet" href="./alicon/iconfont.css">
</head>
<style>@font-face {font-family: 'iconfont';/* src: url('//at.alicdn.com/t/font_1059161_wsvf28b8h9d.woff2?t=1633767982222') format('woff2'),url('//at.alicdn.com/t/font_1059161_wsvf28b8h9d.woff?t=1633767982222') format('woff'),url('//at.alicdn.com/t/font_1059161_wsvf28b8h9d.ttf?t=1633767982222') format('truetype'); */src: url('./alicon/iconfont.woff2') format('woff2'),url('./alicon/iconfont.woff') format('woff'),url('./alicon/iconfont.ttf') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
</style>
<body><div style="border: 1px solid #000;float: left;"><div style="width: 100px;height: 100px;background: #eee;float: left;"></div><i style="font-size:50px;" class='iconfont iconchaoshi'></i><span class="iconfont icontupian"></span><span class="iconfont"></span></div></body>
</html>

阿里巴巴矢量图标库使用相关推荐

阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
阿里巴巴矢量图标库（网页）
首先,阿里巴巴矢量图标库网站资源非常齐全,主要包含了图标库,矢量插画库,3D插画库,动效库,字体库等等,基本能满足小伙伴们日常开发设计需求,里面的所有素材都可以免费使用. 图标库里包含有2300W+ ...
阿里巴巴矢量图标库批量下载图标
阿里巴巴矢量图标库是前端工程师常用到的一个网站.网址:阿里巴巴矢量图标库但是每次下载图标都要挨个点击一下下载按钮,页面不提供批量下载. 操作起来很不方便. 后来我在网上查询,总算找到批量下载的方法, ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...

阿里巴巴矢量图标库使用

一是在线引用

二是下载到本地使用，

阿里巴巴矢量图标库使用相关推荐

最新文章

热门文章

阿里巴巴矢量图标库使用

一是在线引用

二是下载 到本地使用 ，

阿里巴巴矢量图标库使用相关推荐

最新文章

热门文章

二是下载到本地使用，