阿索演讲-演讲技巧,演讲培训,演讲生活 阿索演讲-演讲技巧,演讲培训,演讲生活

眉飞色舞,炉石传说盒子,4s店-阿索演讲-演讲技巧,演讲培训,演讲生活

前面我在Vue中引证了Font Awesome字体图标,Font Awesome现在收入了675个图标(这些是可缩放的矢量图标,能够经过CSS款式来改动图标的巨细、颜色、暗影或许其它任何支撑的作用),相对element来说还算挺多的,今日咱们再来运用一个图库更全的计划,那就是阿里供给的iconfont图标库,这个是现在国内最为强壮的矢量图标库中心,里边含有非常丰富的矢量图标库供给下载。

咱们进iconfont官方图标库,找到自己想要运用的图标字体,然后将其参加购物车中挑选下载至本地,iconfont有个优点那就是能够自行挑选所需的字体然后生成对应的字体款式,这样能够削减许多用不到的字体代码,削减代码(为了更好的办理咱们能够建个项目来专门寄存对应的字体图标)。

下载之后咱们到了一个iconfont字体压缩包,里边包含了字体和款式等文件和一个dome实例,不同的文件能够依据不同的需求来运用,这儿咱们能够参阅dome_index.html提示来操作,里边为咱们供给了各种运用办法,如Unicode引证、Font class引证、Symbol引证。

在项目中的assets中新建一个iconfont目录,把除了dome以外的weni文件都放入该目录,然后在main.js中大局引进css文件,经过import './assets/iconfont/iconfont.css' 引进即可。

假如你想对图标做恰当的调整咱们能够在项目中对咱们的图标进行恰当的修正,如图中所示,调整方位、巨细、方向、颜色等,适当的方便快捷。

接下来咱们就能够在你想要运用的任何当地引证这些iconfont字体图标了,我比较喜爱用Font class来引进字体图标,所以这儿咱们运用 Font class办法来引进字体图标 ,在项目中能够看到每个图标都有对应的代码名,咱们只要在需求的当地经过一个i标签来引证这个图标即可,如:(前面要加iconfont哦,否则无法辨认),这样我能够将该图标引进项目中运用了。

除了Font class的办法,还能够运用Unicode和Symbol来引证,拿Unicode来说, 运用时需在app.vue中设置大局款式,引进iconfont文件相关,每个图标有对应的字符编码,在运用的时分咱们引进字符编码即可,具体的能够参阅demo_index.html,里边写的很具体,还有Symbol引证办法。

作者:admin 分类:国内时事 浏览:264 评论:0