1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 阿里云矢量图html页面引入 iconfont 阿里巴巴矢量图标库使用说明

阿里云矢量图html页面引入 iconfont 阿里巴巴矢量图标库使用说明

时间:2018-09-18 00:46:00

相关推荐

阿里云矢量图html页面引入 iconfont 阿里巴巴矢量图标库使用说明

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

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

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

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

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

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

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

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

font-class引用:

首先在头部引入 iconfont.css 文件

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

"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。

unicode引用:

首先拷贝项目生成的 font-face@font-face{font-family:'iconfont';src:url('iconfont.eot');src:url('iconfont.eot?#iefix')format('embedded-opentype'),url('iconfont.woff')format('woff'),url('iconfont.ttf')format('truetype'),url('iconfont.svg#iconfont')format('svg');}

定义使用iconfont的样式.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;}

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

IconFont 图标

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。