阿里巴巴矢量库的使用

1.登录http://www.iconfont.cn 可以用github帐号登录

2.点击导航栏上的图标库

3.选择自己需要的图标,加入购物车

4.点击右上角购物车

5.点击添加至项目,没有项目要新建一个

6.在新打开的页面,点击Font class和查看在线链接

下面就是如何在项目中使用.本例以vue-cli搭建的项目为例

1.首先在index.html页面引入我们添加的图标样式

http: 后面的部分就是在线链接显示的url

2.具体使用

之前的界面

现在来添加图标,比如我们要使用支付宝钱包的图标

点击复制代码,然后在页面中使用,比如在<H1>的下面使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <i class="iconfont icon-rectangle390"></i>
    <h2>Essential Links</h2>

其中红色部分是固定写法,后面就是你需要的图标样式

稍微修改下样式,改变颜色,增加字体大小

最后效果图

简单的使用到此就OK了

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值