阿里巴巴矢量图标引入方法

css字体图标引入方法
在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。

先推荐一个字体图标库（阿里巴巴矢量图标库）

https://www.iconfont.cn/

一、首先根据项目按需选择好自己需要的图标，添加至入库

二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可

三、最后就可以在代码中引入图标了（字体图标文件里的html文件里可打开查看图标的代码）

注意：需要在@foot-face中修改url地址，定位到字体图标文件夹中方可引入成功

<!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></title><style>/* 引入字体图标 */@font-face {font-family: 'iconfont';src: url('foot/iconfont.woff2?t=1621044854968') format('woff2'),url('foot/iconfont.woff?t=1621044854968') format('woff'),url('foot/iconfont.ttf?t=1621044854968') format('truetype');}/* 定义使用 iconfont 的样式 */.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}</style>
</head>
<body><i class=".iconfont"></i>
</body></html>

方式二

<!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></title><link rel="stylesheet" href="iconfont.css">
</head>
<body><i class="iconfont"></i>
</body></html>

方式三

<!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></title><link rel="stylesheet" href="iconfont.css">
</head>
<body><i class="iconfont icon-renwu"></i>
</body></html>

方式四

<!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></title><script src="iconfobt.js"></script>
</head>
<body><i class="iconfont icon-renwu"></i>
</body></html>

方式五


<!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></title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2564332_bri8xo00ao8.css">
</head>
<body><i class="iconfont icon-renwu"></i>
</body></html>

阿里巴巴矢量图标引入方法相关推荐

WPF关于阿里巴巴矢量图标使用细节
1.关于地址FontFamily="pack://application:,,,/fonts/#iconfont" <TextBlock Height="100&q ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...
使用iconfont阿里巴巴矢量图标库（最方便的使用方法）
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序引入外部icon（阿里巴巴矢量图标）
1.实现效果 2.实现步骤阿里巴巴矢量图标库搜索想要的图标,添加购物车. 添加进自己的项目中获取代码(注意:当项目更新之后,该代码也需更新) 3.实现代码新建一个iconFont.wxss,复 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...

阿里巴巴矢量图标引入方法

阿里巴巴矢量图标引入方法相关推荐

最新文章

热门文章