2017 阿里巴巴矢量图标库 导入所选图标到jsp页面步骤

     阿里巴巴矢量图标库 导入所选图标到jsp页面步骤,给新手看的,自己也是第一次使用,希望对其他人有帮助,因为看到网站很多博客,都说的不是很清楚,避免有人走弯路。

    1.需要注册一个github账号:

        登陆阿里巴巴矢量图标库网站,选择自己想要的图标,添加入库,可以连续添加好几个的,如下图:

        2. 进入你的购物车,也就是那个库里面,选择“下载代码”,会出现一个zip的包,随便下载到本地的目录,进行解压:

        3.下载完之后,就可以看到很多文件,我们如果要直接在jsp使用他们的图标的话,只需要这五个文件,如下图:

          

           其中demo_unicode里面打开可以看到你选择的这四个图标对应的unicode码,这个就是放在你的jsp页面的图片代码。


         4.导入iconfont.css,iconfont.ttf,iconfont.woff导入到你的web工程webroot里面,一般是放在css文件夹里面,如下我的工程目录:

       


         5.导入这些文件,如果要在jsp页面使用这4个图标的话,就需要导入这些css,其他两个iconfont.tff/iconfont.woff文件和css文件在同一级目录即可,如下图:

            

        6.最后一步就是引用你的图标了,在demo_unicode.html选择其中一个图标的unicode代码放到想要的地方即可,如下代码:<i class="iconfont">&#x33;</i>


        至此大功告成,运行结果如下:

   

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值