Material-UI FontIcon组件使用
来源:互联网 发布:手机总是弹出登录网络 编辑:程序博客网 时间:2024/06/07 07:07
material-ui是一款优秀的react组件库,目前在github上Star数已经达到了25759个。其中FontIcon组件包含了900多个系统图标,但是在使用的过程中你会发现图标显示不出来,解决方法如下:
到这个地址https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2把资源下载下来,我这里再提供一个自己备份的地址:http://omqnkdrdg.bkt.clouddn.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>
阅读全文
0 0
- Material-UI FontIcon组件使用
- AndroidStudio使用Material Theme UI
- 在html中使用fontIcon 的图标
- Material Design(2) -- UI色彩的使用
- material design UI颜色的使用
- 【UI设计】2、Material Design主题使用
- android 使用原生UI组件
- ReactJS material-ui 使用的css in js理念
- Android Material Design新UI控件使用大全 一
- Android Material Design新UI控件使用大全 二
- Android Material Design新UI控件使用大全 三
- Android Material Design新UI控件使用大全 一
- Android Material Design新UI控件使用大全 二
- Android Material Design新UI控件使用大全 三
- Android Material Design新UI控件使用大全 一
- Android Material Design新UI控件使用大全 一
- Android Material Design新UI控件使用大全 二
- Android Material Design新UI控件使用大全 三
- 算法
- Java实现参数解析
- CSS常见布局解决方案
- tomcat集群 memcache共享session
- Pos终端中的主密钥、工作密钥、pin密钥、mac密钥
- Material-UI FontIcon组件使用
- C#
- django 重新回忆
- 每天laravel-简单的运行流程
- SpringMvc自定义消息转换器
- h5开发中常见的问题汇总
- QWebEngineView支持XP
- 工业自动化的发展趋势
- 如何清理myeclipse自带的tomcat的缓存