自制图标

56次阅读

共计 738 个字符，预计需要花费 2 分钟才能阅读完成。

打开 Iconfont 阿里巴巴矢量图标库
点击右上角上传，将 SVG 格式的图标上传上去， 图标长宽需相等，内容物居中，距边缘距离适中
改名称和标签为有语义的英文，可选去除颜色提交
批量添加到购物车，下载代码。
下载的文件中有 demo，可根据兼容性需求选择不同的形式使用，demo 中有具体代码
将.eot .svg .ttf .woff 四种格式文件放到 fonts 文件夹中
下面例子是使用 unicode 引用来使用

/* 自定义字体 */
@font-face {
    font-family: "iconfont";
    src: url('../fonts/iconfont.eot'); /* IE9*/
    src: url('../fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */ url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

正文完