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

如何使用阿里矢量图标？当我们需要使用一些矢量图标时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！

这里介绍阿里矢量图标的使用方法。有需要的用户来试试！