欢迎访问Ningto's博客

Menu
  • 首页
  • 归档
  • 关于
  • 书签
  • 必应壁纸
  • IT聚合
  • 工具
    • 我的工具列表
    • 我的网盘
    • 必应每日壁纸API
    • Html转Markdown
    • 仙尘光标
Menu

Material-UI FontIcon组件使用

最后更新 2017-05-21 13:50:20   阅读量 2861

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>
(转载本站文章请注明作者和出处:泞途 - ningto.com)

下一篇 – QWebEngineView支持XP
上一篇 – 网页聊天气泡效果实现

  1. Web

toningto@outlook.com

推荐文章

Effective Python

Python的几种函数参数类型

标签云

Mac React Database Qt Node.js Javascript Product C/C++ Python Bug Tools Windows Linux Tips Design Go IOS MongoDB Shell Android Mobile Life Java Web MQ Others Boost

推广链接

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

多谢支持,用了好几年,服务很稳定支持多设备!

其他

文章RSS

Copyright © 2016 Welcome To Ningto Blog | 鄂ICP备17003086号-2