阿里巴巴矢量库IconFont_

使用阿里巴巴矢量库方法虽然不难，但本人记性不好，遂在次记录几笔

阿里巴巴矢量库地址：http://www.iconfont.cn/plus

阿里巴巴矢量库图标好处：

1：图标矢量化

2：自己总结：iconfont是将图标按字体的方式进行操作，所以称为字体图标，我们可以用CSS来灵活控制图标的大小、颜色、阴影等。

3：通过iconfont平台，我们可以高效快速的生产出规范的图标。

4：流量最小化。

缺点：

1:色调单一，如果图标是五颜六色的，那么iconfont不适合。最多只能用CSS3做一些简单的渐变，或者你可以蛋疼的用多个图标叠加到一起。

使用步骤：

1：进入iconfont官网：http://www.iconfont.cn/plus

2：搜索目标图标，放入"购物车"，完毕后，添加入项目中(需要登录)，没有项目创建即可

3：选择："Unicode4”，然后下载至本地

4：解压下载后的压缩包，打开，复制后缀名为：eot,svg,ttf,woff的文件到项目中，

5：打开html文件，按照其中步骤，复制1,2步骤的内容到项目的css中(.iconfont中内容的按照需求更改和添加)

6：修改路径：将css中@font-face种URL的路径改为对应格式文件路径

7:body中在想要图标的地方加入：<i class="iconfont"></i>，类名为iconfont，内容为图片的名字

8：打开网页，刷新即可看到矢量字体图标。

PS：2017-3-13：这次试用iconfnts中，发现控制台会报错，但不知道怎么解决，但是谷歌会照常显示，火狐浏览器不会正常显示。

转载于:https://www.cnblogs.com/zhangliang-0919/p/6134247.html

阿里巴巴矢量库IconFont__使用小录相关推荐

小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
微信开发工具及Hbuilder中引用阿里巴巴矢量库（步骤一样）
第一步:创建一个阿里巴巴矢量库项目,将图标加入项目中,并生成一个在线的css文件第二步:在微信开发者工具中新建一个.wxss文件,把第一步中的复制好的代码粘贴到这个文件中,如果将来有新的图标放置项目 ...
ant design pro of vue导航菜单图标引入阿里巴巴矢量库iconfont方法
第一步: 去阿里巴巴矢量库生成项目图标.复制以下代码: 第二步: 打开项目组件中Menu/menu.js. 第三步: 引入Icon组件并添加以下代码,scriptUrl为你自己项目生成的url. 第四 ...
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
uni-app引入阿里巴巴矢量库（iconfont）图标
标题uni-app引入阿里巴巴矢量库(iconfont)图标进入官网,下载到本地需要使用的的文件在uni项目中根目录下的static下创建文件夹iconfont 将这里这个iconfont.cs ...
阿里巴巴矢量库的用法
阿里巴巴矢量库的用法: 1.将选中的图标下载到本地然后把文件解压 , 里边的文件放在自己项目的font文件夹下 2.Unicode 使用步骤如下: 第一步:拷贝项目下面生成的 @font-face ...
vue用Symbol方式全局封装Iconfont阿里巴巴矢量库图标组件
一.在components路径下创建IconSvg文件夹并在IconSvg下创建IconSvg.vue文件.index.js文件 Iconsvg.vue文件代码 <template>&l ...
CSS:运用阿里巴巴矢量库快速在对应位置加上好看的图标
进入阿里巴巴矢量图标库阿里巴巴矢量图标库选择喜欢的图标的,点击添加到库选择完之后,点击右上角的购物车图标(前提是已经登录,推荐使用GitHub登录) 然后在右侧中点击添加至项目之后在个人主页中 ...

阿里巴巴矢量库IconFont__使用小录

阿里巴巴矢量库IconFont__使用小录相关推荐

最新文章

热门文章