Material-UI FontIcon组件使用
•
Table of Contents
material-ui是一款优秀的react组件库，目前在github上Star数已经达到了25759个。其中FontIcon组件包含了900多个系统图标，但是在使用的过程中你会发现图标显示不出来，解决方法如下：
到这个地址https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2把资源下载下来，我这里再提供一个自己备份的地址：/upload/o_1bgljqsqrvbv78v8lu1fsr1trca.woff2
新建一个css文件内容如下，注意里面的url地址就是上面资源的地址，也就是将此文件放在你的服务器上的地址（下面是测试的地址）
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(http://localhost:3000/imgs/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
- 最后，将上面的css文件link到html文件中就可以了。
使用方法见文档，有好几种方法，如：
<FontIcon className="material-icons">keyboard_arrow_left</FontIcon>