阿里巴巴矢量图标库的使用
阿里巴巴矢量图标库的使用
阿里巴巴矢量图标库的使用各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢阿里巴巴矢量图标库的使用阿里巴巴矢量图标库的使用一、引用线上图标库1.登录阿里巴巴矢量图标库，鼠标悬停在需要的图标，点击收藏入库，点击下载到本地或添加到项目搜索你需要的图标并加入购物车选好之后选择储存为新项目生成在线链接，并复制到css中即可使用。
注意：在本地调试的时候，url(//)里双斜杠之前记得加上https:，像这样url(https://..)，不然会用file协议访问链接就找不到。
二. 范例：1.线上123 矢量图456 // 引用线上的图标库8 @font-face {9 font-family: ‘iconfont’; /* project id 238765 */10 src: url(‘///t/font_’);11 src: url(‘///t/font_?#iefix’) format(‘embedded-opentype’),12 url(‘///t/font_’) format(‘woff’),13 url(‘///t/font_’) format(‘truetype’),14 url(‘///t/font_#iconfont’) format(‘svg’);15 }161718 //图标样式19 .iconfont {20 font-family:”iconfont” !i mportant;21 font-size:16px;22 font-style:normal;23 -webkit-font-smoothing: antialiased;24 -moz-osx-font-smoothing: grayscale;25 }262282930313233342.本地1 @font-face {2 font-family: Iconfont; //自定义命名3 src: url(‘‘), //这个路径为本地的相对路径，4 url(‘‘),5 url(‘‘),6 url(‘‘);}8 .myiconfont {9 font-family:”Iconfont” !important; //名字一致10 font-size:50px;11 font-style:normal;12 color:#ccc;13 -webkit-font-smoothing: antialiased;14 -moz-osx-font-smoothing: grayscale;15 }161181920212223三、新版Iconfont-阿里巴巴矢量图标库支持三种引用方式：引用unicode是字体在网页端最原始的应用方式，特点是：兼容性最好，支持ie6+，及所有现代浏览器。
阿里矢量图标库的使用
阿⾥⽮量图标库的使⽤
1、注册登录账号
该⽹站可通过GitHub或新浪账号进⾏登录
下⾯是⽹站的⾸页
2、查找图标
在中间输⼊框输⼊想要查找的图标,。
以‘home’为例，点击搜索，即可得到以下页⾯。
3，将图表添加⾄项⽬。
选中⾃⼰需要的图标，将其添加⼊库，这时再点击页⾯右上⾓的购物车图标
弹出以下页⾯，点击添加⾄项⽬，如果是新建项⽬，点击右边的加号图标，然后点击确定
4，在项⽬中使⽤图标
添加⾄项⽬后会跳转⾄以下页⾯，左边显⽰项⽬的名称，右上⾓可以添加项⽬成员，共享这些图标。
要使⽤这些图标的话就需要下载⾄本地
了。
点击下载⾄本地，会得到⼀个压缩⽂件，解压⽂件，得到以下内容
将上图5个⽂件放⼊项⽬的⽬录下，并在main.js⽂件中引⼊css⽂件。
⽤浏览器打开fontclass.html⽂件，将图标的类名添加⾄ i 标签即可，如下所⽰。
<i class="iconfont icon-home"></i>。
iconfont使用方法
iconfont使用方法Iconfont是一种矢量图标库，它可以通过CSS来使用，而不是像传统的图像文件一样。
这使得Iconfont在网站和应用程序中使用时更加灵活和方便。
在本文中，我们将介绍如何使用Iconfont。
第一步是注册Iconfont账户。
在注册后，您可以浏览和下载数千个图标。
您可以选择将它们保存在本地计算机上，或者将它们直接添加到您的项目中。
第二步是选择您需要的图标。
您可以使用搜索栏来查找特定的图标，或者浏览不同的类别。
一旦您找到了您需要的图标，您可以将它们添加到购物车中。
第三步是下载您的图标。
您可以选择将它们保存在本地计算机上，或者将它们直接添加到您的项目中。
如果您选择将它们添加到您的项目中，您需要将它们上传到您的服务器。
第四步是将图标添加到您的网站或应用程序中。
您可以使用CSS来添加图标。
首先，您需要将Iconfont的CSS文件添加到您的HTML 文件中。
然后，您可以使用类名来添加图标。
例如，如果您想添加一个搜索图标，您可以使用以下代码：<i class="iconfont icon-search"></i>这将在您的网站或应用程序中添加一个搜索图标。
您可以使用CSS来自定义您的图标。
您可以更改图标的颜色、大小和其他属性。
例如，如果您想将搜索图标的颜色更改为红色，您可以使用以下代码：.icon-search {color: red;}这将将搜索图标的颜色更改为红色。
Iconfont是一种非常方便的矢量图标库，可以帮助您在网站和应用程序中添加漂亮的图标。
通过遵循上述步骤，您可以轻松地使用Iconfont，并将其添加到您的项目中。
boxicons用法
boxicons用法
Boxicons 是一个开源的矢量图标库，它提供了一系列现代化的矢量图标，可以用于网站、应用程序和其他设计项目。
要使用Boxicons，首先需要在你的项目中引入 Boxicons 的 CSS 文件或者JavaScript 文件。
你可以通过 CDN 或者直接下载文件来引入。
一旦引入了 Boxicons，你就可以在你的 HTML 文件中使用这些图标了。
你可以通过在标签中添加相应的类名来使用不同的图标。
例如，你可以使用类名 "bx bx-home" 来添加一个家的图标。
你也可以通过修改类名中的前缀 "bx" 来改变图标的样式，比如使用"bxs" 前缀来使用实心图标。
除了在 HTML 中直接使用类名来引用图标外，你也可以在 CSS 中使用伪元素来插入图标，或者在 JavaScript 中动态地添加图标到你的页面中。
总的来说，Boxicons 的用法非常灵活，你可以根据自己的需要选择适合的方式来使用这些图标。
希望这些信息能够帮助你更好地理解如何使用 Boxicons。
使用阿里巴巴图标库生成iconfont字体图标
使用阿里巴巴图标库生成iconfont字体图标iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制，但是缺点就是只能实现一种颜色，不能像图片那样含有各种颜色。
通过阿里巴巴图标库制作字体图标步奏如下（默认已注册阿里巴巴图标库）：1、首先搜索所要展示的图片，找到后点击入库。
2、点击入库的图标，结果如下图所示，选择添加至项目或点新建项目。
3、点击确定之后如下图所示，鼠标悬浮在上面可以选择对图标信息进行修改。
4、选择Font class，点击下载至本地便把字体编辑好了。
5、结下来是使用字体，选中生成的字体添加至项目工程中。
6.修改css文件引用生成的字体iconfont.css内容如下：[html] view plain copyprint?1.<!DOCTYPE html>2.<html>3.<head>4.<meta charset="UTF-8">5.<title>postMessage解决跨域、跨窗口消息传递</title>6.<style type="text/css">7.@font-face {font-family: "iconfont";8.src: url('fonts/iconfont.eot?t=1483950473775'); /* IE9*/9.src: url('fonts/iconfont.eot?t=1483950473775#iefix') form at('embedded-opentype'), /* IE6-IE8 */10.url('fonts/iconfont.woff?t=1483950473775') format('w off'), /* chrome, firefox */11.url('fonts/iconfont.ttf?t=1483950473775') format('true type'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/12.url('fonts/iconfont.svg?t=1483950473775#iconfont') f ormat('svg'); /* iOS 4.1- */13.}14.15..iconfont {16.font-family:"iconfont" !important;17.font-size:16px;18.font-style:normal;19.color: lightblue;20.-webkit-font-smoothing: antialiased;21.-moz-osx-font-smoothing: grayscale;22.}23.24..icon-xingzuotianchengzuo:before { content: "\e672"; }25.26.@font-face {font-family: "iconfont";27.src: url('fonts/iconfont.eot?t=1483951178754'); /* IE9* /28.src: url('fonts/iconfont.eot?t=1483951178754#iefix') fo rmat('embedded-opentype'), /* IE6-IE8 */29.url('fonts/iconfont2.woff?t=1483951178754') format(' woff'), /* chrome, firefox */30.url('fonts/iconfont2.ttf?t=1483951178754') format('tru etype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/31.url('fonts/iconfont.svg?t=1483951178754#iconfont') f ormat('svg'); /* iOS 4.1- */32.}33.34..icon-star:before { content: "\e602"; }35.</style>36.</head>37.<body>38.<div style="width: 200px; float: left;margin-right: 200px;border: 1px solid #3F3F3F;">39.<i class="iconfont icon-xingzuotianchengzuo"></i>40.<i class="iconfont icon-star"></i>41.42.</div>43.</body>44.</html>。
怎么制作ppt常用工具小图标
与您分享制作ppt时常用的一些小工具图标技巧，具体分享如下：
工具/原料
wps
方法/步骤
1. 1
推荐一个经常使用的网站“阿里巴巴矢量图标库”。
打开“阿里巴巴矢量图标库”网站，在搜索栏中输入想要的图标类型。
比如我输入“工作”来搜索与工作相关的图标，选择我喜欢的，然后单击“下载”按钮。
在弹出窗口中，您可以选择颜色和下载格式。
下载后，您可以将其插入幻灯片。
2. 2
下面是关于图标的使用。
如果你想让幻灯片看起来更好看一些，你需要注意风格的统一。
比较一下下面这两组图标，是不是第一组统一的线性样式好看多了？
3. 3
此外，WPS还有一个内置的图标库。
单击“插入”菜单栏并选择“图标库”。
在搜索栏中输入内容，选择所需的元素，然后
单击“插入”。
您也可以点击右上角的“工作台”，图标工具栏将出现在右侧。
单击此处的图标可直接在幻灯片中显示。
这也是一种非常方便的方法。
END。
阿里矢量图~！import
阿⾥⽮量图~！import 阿⾥iconfunt官⽹对于图标的调⽤写的不够详细，许多初⽤者不会⽤，下⾯具体介绍下总结的两种⽅法：⼀、在线调⽤⽅式1、⾸先建⽴新浪微博账号，⽤微博号登录iconfunt官⽹； 2、所需要图标加⼊购物车；3、存储为项⽬；4、获取在线链接、⽣成在线链接；5、选择fontclass在线css模式；6、把在线链接粘贴到link标签；7、⽤.iconfont如上，在⾥边随意修改样式；8、在html中需要的位置写<i class="iconfont">此处写图标的编号&#...;</i>；demo：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title></title><link href="/t/font_1461119990_7929926.css" type="text/css" rel="stylesheet"/><style>.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;padding-left:20px}</style></head><body><i class="iconfont"></i></body></html>⼆、离线调⽤⽅式 此⽅法需要本地下载iconfunt官⽹demo，然后如下，切记要把demo⾥.ttf和.woff亮哥⽂件引⼊即可：<!doctype html><html lang="en"><head><meta charset="UTF-8"><title></title><style>@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1461117480'); /* IE9*/src: url('iconfont.eot?t=1461117480#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff?t=1461117480') format('woff'), /* chrome, firefox */url('iconfont.ttf?t=1461117480') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1461117480#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}.icon-icon1460345725196:before { content: "\e61d"; }</style></head><body><div class="box"><i class="iconfont"></i></body></html>⼀定⼀定要记得加link⾥⾯的链接~妥妥测了⼀晚上，蓦然回⾸才发现可爱的寄⼏⼀直没加链接！还有相当重要的⼀句话：这篇博客是转载的只有下⾯两句是博主的原创啊哈哈哈原⽂作者：。
简单介绍一下阿里巴巴矢量图标库的使用
简单介绍⼀下阿⾥巴巴⽮量图标库的使⽤相信做过前端的都知道阿⾥巴巴⽮量图标库，这是⼀个⾮常好⽤的添加⼩图标的⽅法，⽽且是完全免费的，可以在线使⽤也可以下载到本地使⽤，⽽且图标是作为字体插⼊，不仅可以改变颜⾊⼤⼩，⽽且在布局⽅⾯也⾮常⽅便。
下⾯我就来介绍⼀下阿⾥巴巴⽮量图标库Iconfont。
Iconfont之前只包括官⽅图标库和所有图标库，现在改版⼜多了个多⾊图标库，这个暂时没⽤过，⽤过再来讲，这⾥我⼀般都选所有图标库。
点进去之后在上⾯有⼀个搜索框，可以输⼊关键字搜索，⽐如输⼊：“主页”，就会出现代表主页的图标;这个图标会有很多，⼤家要注意是线条的还是填充的。
找到你想要的图标之后你可以有三种选择：第⼀，将想要的图标保存成图⽚格式下载到本地，⼀般有三种格式，SVG下载，AI下载，ＰＮＧ下载;SVG格式是可缩放的⽮量图形，⽤来定义⽤于⽹络的基于⽮量的图形;因为图像是⽮量图，在改变尺⼨时图形质量不会有所损失;AI格式是指在Adobe Illustrator的软件中制作的⽮量图，但是只能在特定软件中打开，也可在PS中打开,不过打开后显⽰的不是⽮量图，⽽是位图，不是⽤于设计的⼀般⽤不上;所以较为常⽤的是存储为PNG格式，作为图⽚插⼊；第⼆：当你需要下载多个⼩图标时，将选好的图标统⼀加⼊购物车，加⼊购物车后点击下载代码，就可以下到本地使⽤了。
这⼀步从前不需要登录，但是现在改版了，需要先登录才可以操作，然后它有⼀个缺点，就是如果你想要添加⼏个图标的话需要重新下载所有的，当然，也不是没有解决办法办法的，可以下载新的之后，在css⽂件夹⾥再创建⼀个⽂件夹，在⾥⾯再写⼀个css外联样式表⽤来操作新的⼩图标，不过这样似乎有点劳师动众，⽽且⽂件夹⾥再嵌套⽂件夹，对⽹页性能也是有影响的；所以如果你不是⾮要下载到本地的话，可以尝试第三种⽅法。
使⽤时，将打包后的zip包解压，⾥⾯有三个html⽂件，打开，⾥⾯是在本地使⽤的三种⽅法（之前只有Unicode），⼤家可以在浏览器中打开，按照步骤操作，把⾥⾯的两⼤段代码拷贝到css⽂件中，然后就不需要再动他们了，这⾥要说⼀下，在进⾏下⾯操作之前需要先把解压后⽂件除了开头字母为demo的⼏个⽂件外，其他的都拷贝到css⽂件夹根⽬录，确保你在使⽤时能调到这⼏个⽂件（可能有些不是必须，但我⽐较懒，就都拷贝了）；这样基本就完成了，你想在页⾯哪⾥使⽤，只要在demo⾥获取Unicode码，替换<i class="iconfont">3</i>中间的就可以了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
阿里巴巴矢量图标库的使用
阿里巴巴矢量图标库的使用一、引用线上图标库
1.登录阿里巴巴矢量图标库（可以微博登录），鼠标悬停在需要的图标，点击收藏入库（购物车图标），点击下载到本地或添加到项目
搜索你需要的图标并加入购物车
选好之后选择储存为新项目
生成在线链接，并复制到css中即可使用。
注意：在本地调试的时候（就是当你的浏览器网址是file协议开头的时候），
url(//)里双斜杠之前记得加上https:，像这样url(https://at.alicdn...)，
不然会用file协议访问链接就找不到。
二. 范例：
1.线上
1
2
3 矢量图
4
5
6 // 引用线上的图标库
7
8 @font-face {
9 font-family: iconfont; /* project id 238765 */
10 src: url(//at.alicdn/t/font_pzihjs6e7ki6bt9.eot);
11 src: url(//at.alicdn/t/font_pzihjs6e7ki6bt9.eot?#iefix) format(embedded-opentype),
12 url(//at.alicdn/t/font_pzihjs6e7ki6bt9.woff) format(woff),
13 url(//at.alicdn/t/font_pzihjs6e7ki6bt9.ttf) format(truetype),。