关于初次接触material-design-icons的记录

介绍

    Google Material Design的图标字体版本。
    所谓的图标字体(iconfont),在互联网刚起步的时候,较多使用的是png图片,但是png图片更换起来很麻烦, 
并且自适应效果很差,有时候会出现锯齿以及马赛克模糊的情况,加载起来也较慢,影响用户体验。iconfont 的产生
就是来解决上面的问题,将 icon 做为字体来使用,它具有很多优势。
如何使用字体图标 iconfont:
https://www.jianshu.com/p/5b7a0a205e05

下载地址

material-design-icons在GitHub上的下载地址:
https://github.com/zavoloklom/material-design-iconic-font

使用

参看:https://www.imooc.com/article/details/id/1042 中的第二种方法css引入再以class的方法添加;

注意点

使用前,确认material-design-iconic-font.min.css文件中这段引用中的两个文件的路径是否匹配:

@font-face {
    font-family: Material Design Iconic Font;
    src: url(../fonts/Material-Design-Iconic-Font.woff?v=2.0.0)
        format('woff'), url(../fonts/Material-Design-Iconic-Font.ttf?v=2.0.0)
        format('truetype')
}

引用图标时,主要是取material-design-iconic-font.min.css中找需要的图标对应的class名,比如:

.zmdi-3d-rotation:before {/* 旋转 */
    content: '\f101'
}

.zmdi-album:before {
    content: '\f102'
}

.zmdi-archive:before {
    content: '\f103'
}

.zmdi-assignment-account:before {/* 分配账号 */
    content: '\f104'
}

.zmdi-assignment-alert:before {/* 账户警告 */
    content: '\f105'
}

.zmdi-assignment-check:before {/* 账户确认 */
    content: '\f106'
}

.zmdi-assignment-o:before {/* 无 */
    content: '\f107'
}

.zmdi-assignment-return:before {/* 账户回退 */
    content: '\f108'
}
.zmdi-thumb-down:before {/* 点赞(满意) */
    content: '\f1a0'
}

.zmdi-thumb-up-down:before {/* 取消赞(不满意) */
    content: '\f1a1'
}

疑问

找了两小时,也没在网上找到material-design-icons中图标和数字码对应的文档或工具,这是为什么?
[icomoon](https://icomoon.io/app/#/select/font)上大部分的类似工具都能查到其图标的数字码,原以为里面对应的一个库materal icons就是material-design-icons,可是一对比,css是完全不一样的。
有知道原因的,麻烦留言解惑一下,万分感谢!

猜你喜欢

转载自blog.csdn.net/qq_38969990/article/details/79557742