阿里巴巴矢量图标库的使用，超详细用法

阿里巴巴矢量图标库的使用

官网地址： iconfont 阿里巴巴矢量图标库

登录
在页面中选择喜欢图标库点进
鼠标悬停想要的图标选择添加入库
入库成功后本图标会有一个虚线框右上角的库图标会有个数的小红点
点击购物车图标选择添加至项目（如果没有就创建一个）
确定就会跳转到我的项目页面选择图标添加入库选择 Font class
点击下载至本地
下载完成后，打开压缩包，只解压一个iconfont.css文件到页面要用到的css包里

然后开始在代码中操作

在head中导入iconfont.css文件
官网有三种方法，在导入包后三种方法都可以用，这里就举第一个例子吧

第一步：拷贝项目下面生成的font-face

/* 注：官网里的url没有 http:// 在代码里都得加上 */
@font-face {   font-family: 'iconfont';src: url('http://iconfont.eot');src: url('http://iconfont.eot?#iefix') format('embedded-opentype'),url('http://iconfont.woff') format('woff'),url('http://iconfont.ttf') format('truetype'),url('http://iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

/* 要修改这个的样式 得把引入的iconfont.css包放在自己的css文件上面 */
.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;}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#xe663;</i>

i标签里的代码来源于 Unicode 的代码

这样之后打开页就能显示啦！！！
这样的图标相当于文字，文字有的样式，图标也能使用，样式的改变在第二步的代码中设置哦！！！

因为一直没找到官网其他解释的地址，所以用图片展示吧：

阿里巴巴矢量图标库的使用，超详细用法相关推荐

阿里巴巴矢量图标库iconfont的使用
场景工作中如果用到常用的一些图片去哪寻找. 阿里巴巴矢量图标库: https://www.iconfont.cn/home/index 注: 博客主页: https://blog.csdn.net/ ...
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地. 2.解压文件. 3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/icon ...
阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
Element引入Iconfont（阿里巴巴矢量图标库）第三方图标库
最近在使用vue-element-admin开源项目进行系统开发,但是在引入第三方图标库的时候,出现了一些问题,百度找了找,也没有找到自己想要的答案,最后经过多次尝试,将问题解决.所以特此记录一下,以 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
【uni-app怎么引用使用阿里巴巴矢量图标库iconfont】
uni-app引用使用阿里巴巴矢量图标库iconfont 1.新建文件(看了好几篇使用说明和官方说明总结出来的用法) 首先右击项目新建一个目录common和pages同级,右击common文件夹新建一 ...
阿里巴巴矢量图标库（网页）
首先,阿里巴巴矢量图标库网站资源非常齐全,主要包含了图标库,矢量插画库,3D插画库,动效库,字体库等等,基本能满足小伙伴们日常开发设计需求,里面的所有素材都可以免费使用. 图标库里包含有2300W+ ...
阿里巴巴矢量图标库批量下载图标
阿里巴巴矢量图标库是前端工程师常用到的一个网站.网址:阿里巴巴矢量图标库但是每次下载图标都要挨个点击一下下载按钮,页面不提供批量下载. 操作起来很不方便. 后来我在网上查询,总算找到批量下载的方法, ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
Vue项目引入阿里巴巴矢量图标库
添加图标并下载一.点击图标管理–>我的项目,创建项目简单点~填个项目名即可二.选择一个图标,加入购物车点击右上角购物车的图标,添加至项目(可以直接点击下载代码,不需要创建项目,但是如果是 ...

阿里巴巴矢量图标库的使用，超详细用法

阿里巴巴矢量图标库的使用

阿里巴巴矢量图标库的使用，超详细用法相关推荐

最新文章

热门文章