react使用阿里爸爸的iconfont时,不展示的问题
选择使用Unicode
时:
- 正常使用如下,显示也是正常:
<i className="iconfont"></i>
- 使用map去循环时,需将原本的
,改成\ue600
具体原因:查看网上的其他博主,没看到合理的解释,目前理解成,需要转义
let otherStyle=[{
icon:'\ue7e5',
name:'微信'
},{
icon:'\ue666',
name:'QQ'
},{
icon:'\ue62a',
name:'新浪微博'
},{
icon:'\ue600',
name:'网易邮箱'
}]
let otherLoginStyle=otherStyle.map((item,index)=>{
return(
<div onClick={()=>this.otherLoginStyle()} key={index}>
<div className="login-border">
<i className="iconfont login-icon1">{item.icon}</i>
</div>
<div>{item.name}</div>
</div>
)
})
react使用阿里爸爸的iconfont时,不展示的问题的更多相关文章
- react native-调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错
调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- React Native 在用户网络故障时自动调取缓存
App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...
- react className 有多个值时的处理 / react 样式使用 百分比(%) 报错
1.react className 有多个值时的处理 <fieldset className={`${styles.formFieldset} ${styles.formItem}`}> ...
- React 设计模式 --- Container and Presentational pattern(容器和展示组件分离)
在React开发中,一个典型的React组件通常会混杂着逻辑操作部分和展示部分.逻辑操作部分指的是和页面UI无关的内容,如API的调用,数据的处理,事件处理函数. 展示部分则指的是创建页面UI 的内容 ...
- iconfont阿里爸爸做的开源图库
iconfont 三种使用姿势 1.unicode格式 优点 兼容性最好,支持ie6+ 支持按字体的方式去动态调整图标大小,颜色等等 缺点 不支持多色图标 在不同的设备浏览器字体的渲染会略有差别,在不 ...
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
- 来自阿里妈妈的iconfont(转)
转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...
随机推荐
- Spring事务管理-传播行为-隔离级别
事务是逻辑上的一组操作,这组操作要么全部成功,要么全部失败. 事务的特性:ACID 原子性:事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不发生 一致性:事务前后数据的完整性约束保持一致 ...
- favicon.ico引用
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> ...
- mongoose 常用数据库操作 查询
条件查询 Model.find(conditions, [fields], [options], [callback]) demo1 try.js var User = require(". ...
- MySql中创建存储过程
MySQL 存储过程是从 MySQL 5.0 开始增加的新功能.存储过程的优点有一箩筐.不过最主要的还是执行效率和SQL 代码封装.特别是 SQL 代码封装功能,如果没有存储过程,在外部程序访问数据库 ...
- Android中.9图片的了解和制作过程
个部分(九宫格),分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的清晰状态,而2条水平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,只有中间用黑线指 ...
- D. Who killed Cock Robin--“今日头条杯”首届湖北省大学程序设计竞赛(网络同步赛)
题目描述:链接点此 这套题的github地址(里面包含了数据,题解,现场排名):点此 题目描述 由于系统限制,C题无法在此评测,此题为现场赛的D题 Who killed Cock Robin? I, ...
- 关于ACL访问控制的一些问题:AntiACL
@echo off title AntiACL Made By gwsbhqt color 0a reg query "HKU\S-1-5-19" >nul 2>nul ...
- 架构-Java-Netty:Netty框架
ylbtech-架构-Java-Netty:Netty框架 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网 ...
- RabbitMQ 交换器、持久化
一. 交换器 RabbitMQ交换器(Exchange)分为四种 direct fanout topic headers direct 默认的交换器类型,消息的RoutingKey与队列的bindi ...
- 3.4 redux 异步
在大多数的前端业务场景中,需要和后端产生异步交互,在本节中,将详细讲解 redux 中的异步方案以及一些异步第三方组件,内容有: redux 异步流 redux-thunk redux-promise ...