下载下来的阿里巴巴矢量图怎么做命名一样怎么处理

做设计的应该会知道“”这个网站你可以上传自己设计的图标,也可以下载别人分享的图标

作为前端,我们也可以更好的利用它实现网站图标的美化。

首先找到你需要的图标并加入库:三个按钮分别是 加入库、加入收藏和下载

点击下载按钮后会弹出一个窗口你可以调整任意颜色和尺寸,可以下载 SVG、AI和PNG3种格式

点击右上角图标,打开库点击“下载代码”下载字体包,你也可以先添加至项目然后在“我的项目里面,点击“下载箌本地进行下载

点击“添加至项目”你可以添加项目名称,点击“确定”保存到我的项目

在我的项目中你可以生成在线链接,这里給出3种方式:Unicode、Font class和Symbol

点击“下载至本地”会下载一个包解压后就可以引入使用了

浏览器打开“demo_xxx.html”可以看到图标的使用方法,有三种引用方式

然后在 html 代码中使用相应的类名应用于页面

然后挑选相应图标并获取字体编码应用于页面

首先引入项目下面生成的symbol代码

加入通用css代码(引入一次就行)

然后挑选相应图标并获取类名,应用于页面

使用的时候只需要保留一种方式所需要的文件和字体文件其他的删掉就可以叻。

怎么样是不是很方便呢?

1.登陆官网选择需要的图标,将其添加至项目然后下载至本地。

3.在工程目录下新建CSS文件夹在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/iconfont文件夹之下

4.将下载嘚图标文件中的iconfont.css复制到CSS文件夹之下,与iconfont文件夹在同一层

6.双击打开iconfont.css文件,修改引用文件路径其他部分不做修改

9.打开阿里巴巴矢量图怎么莋标库,复制图标的代码

10.将复制所得的代码添加到span元素中

也可以不在新建的CSS文件夹之下在新建iconfont文件夹,那么iconfont.css文件的引用路径也不必修改不过这样操作的话,CSS文件夹之下看起来略乱

发布了77 篇原创文章 · 获赞 51 · 访问量 5万+

我要回帖

更多关于 矢量图怎么做 的文章

 

随机推荐