电脑公司 - 专注最好用的Win7旗舰版镜像下载网站!(本站Win7完美支持USB3.0) 电脑公司首页 | Win7激活工具 | 热门专题
电脑公司>您的位置:首页 > > 系统教程 > 软件教程 >

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

更新时间:2019-11-22 10:13:09| 编辑: | 信息来源:本站整理|浏览数:
阿里矢量图标怎么使用?当我们需要使用一些矢量图标“img”文件的话该如何进行使用呢?本文中winwin7小编给大家分享介绍下阿里矢量图标使用方法,有需要的用户快来试试吧!

阿里矢量图标怎么使用?教你阿里矢量图标使用方法
 

阿里矢量图标使用方法


1、首先选择去图标库自行选择想要的图标;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

2、选择图标,点击图标变成橘色,即放在暂存架;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

3、选择好要用的图标后,点击暂存架的下载至本地,解压待用;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

4、将下载完的文件解压后,放到某一文件夹中,右键打开demo_unicode.html文件;

阿里矢量图标怎么使用?教你阿里矢量图标使用方法

5、把上述文件中的代码复制到自己的项目中:

  @font-face {font-family: "iconfont";
          src: url('iconfont.eot'); /* IE9*/
          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
 
        .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值就是上面样式中的class!

关于阿里矢量图标使用方法就给大家介绍到这里,有需要的用户快来试试吧!
 
分享到:

返回顶部


电脑公司发布的系统镜像及软件均来至互联网,仅供学习和研究使用,不得用于任何商业用途并请在下载后24小时内删除,如果满意请联系版权方购买。
如果您发现本站侵害了您的版权,请立即联系我们,本站将第一时间进行相关处理。邮箱:448377971#QQ.com[请将#换成@]
版权声明|下载声明 Copyright @ 2016 电脑公司