阿里巴巴矢量图标库的使用,超详细用法

阿里巴巴矢量图标库的使用

官网地址: iconfont 阿里巴巴矢量图标库

  1. 登录
  2. 在页面中选择喜欢图标库点进
  3. 鼠标悬停想要的图标 选择添加入库
    阿里巴巴矢量图标库的使用,超详细用法_第1张图片
  4. 入库成功后 本图标会有一个虚线框 右上角的库图标会有个数的小红点
    阿里巴巴矢量图标库的使用,超详细用法_第2张图片
  5. 点击购物车图标 选择添加至项目(如果没有就创建一个)
  6. 确定 就会跳转到我的项目页面 选择图标 添加入库 选择 Font class
    阿里巴巴矢量图标库的使用,超详细用法_第3张图片
  7. 点击下载至本地
  8. 下载完成后,打开压缩包,只解压一个iconfont.css文件到页面要用到的css包里
    阿里巴巴矢量图标库的使用,超详细用法_第4张图片

然后开始在代码中操作

  1. 在head中导入iconfont.css文件
    官网有三种方法,在导入包后三种方法都可以用,这里就举第一个例子吧
  • 第一步:拷贝项目下面生成的font-face
/* 注:官网里的url没有 http:// 在代码里都得加上 */
@font-face {
        
    font-family: 'iconfont';
    src: url('http://iconfont.eot');
    src: url('http://iconfont.eot?#iefix') format('embedded-opentype'),
    url('http://iconfont.woff') format('woff'),
    url('http://iconfont.ttf') format('truetype'),
    url('http://iconfont.svg#iconfont') format('svg');
}
  • 第二步:定义使用iconfont的样式
/* 要修改这个的样式 得把引入的iconfont.css包放在自己的css文件上面 */
.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="iconfont">i>

i标签里的代码来源于 Unicode 的代码
阿里巴巴矢量图标库的使用,超详细用法_第5张图片
阿里巴巴矢量图标库的使用,超详细用法_第6张图片

这样之后打开页就能显示啦!!!
这样的图标相当于文字,文字有的样式,图标也能使用,样式的改变在第二步的代码中设置哦!!!

因为一直没找到官网其他解释的地址,所以用图片展示吧:阿里巴巴矢量图标库的使用,超详细用法_第7张图片

你可能感兴趣的:(阿里图库的使用,css,html)