删除文章

确定要删除这篇文章吗?

取消
确定

Material-UI FontIcon组件使用

     阅读(838)  2017-05-21 21:50:20

material-ui是一款优秀的react组件库,目前在github上Star数已经达到了25759个。其中FontIcon组件包含了900多个系统图标,但是在使用的过程中你会发现图标显示不出来,解决方法如下:

  • 到这个地址https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2把资源下载下来,我这里再提供一个自己备份的地址:http://images.ningto.com/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>

文章评论

Keep it simple,stupid
文章数
303
总访问量
491455
今日访问
1831
最近评论

tujiaw : registerThreadInactive:如果当前没有激活的线程,就去激活线程,让等待的线程去执行任务。
hgzzx : 佩服佩服。 请教:registerThreadInactive的作用是什么?
xuehaoyun : 很不错,来围观一下
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
回到顶部