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

来源:互联网 发布:龙渊网络 编辑:程序博客网 时间:2024/06/14 08:30

     阿里巴巴矢量图标库 导入所选图标到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代码放到想要的地方即可,如下代码:<iclass="iconfont">&#x33;</i>


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

   

0 0