选择使用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时,不展示的问题的更多相关文章

  1. react native-调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错

    调用react-native-fs插件时,如果数据的接口是需要验证信息的,在android上运行报错,而在iOS上运行没问题.原因是因为接口是有验证信息的,而调用这个插件时没有传入,在iOS上会自动加 ...

  2. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  3. React Native 在用户网络故障时自动调取缓存

    App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...

  4. react className 有多个值时的处理 / react 样式使用 百分比(%) 报错

    1.react className 有多个值时的处理 <fieldset className={`${styles.formFieldset} ${styles.formItem}`}> ...

  5. React 设计模式 --- Container and Presentational pattern(容器和展示组件分离)

    在React开发中,一个典型的React组件通常会混杂着逻辑操作部分和展示部分.逻辑操作部分指的是和页面UI无关的内容,如API的调用,数据的处理,事件处理函数. 展示部分则指的是创建页面UI 的内容 ...

  6. iconfont阿里爸爸做的开源图库

    iconfont 三种使用姿势 1.unicode格式 优点 兼容性最好,支持ie6+ 支持按字体的方式去动态调整图标大小,颜色等等 缺点 不支持多色图标 在不同的设备浏览器字体的渲染会略有差别,在不 ...

  7. 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  8. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  9. 来自阿里妈妈的iconfont(转)

    转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...

随机推荐

  1. 编写Android.mk中的LOCAL_SRC_FILES的终极技巧(转)

    转自:http://blog.csdn.net/fu_zk/article/details/12836431 问题的引入 在使用NDK编译C/C++项目的过程中,免不了要编写Android.mk文件, ...

  2. appium1.4+华为8.0执行自动化脚本,报启动session失败,原因是unicode_ime_apk\Uni codeIME-debug.apk在手机上已存在,再次安装失败,导致启动session失败,解决办法:换高版本的appium

    最开始做Android自动化测试时,通过执行脚本发现报,已安装UnicodeIME-debug.apk,再次安装失败,当时觉得这个apk对我来说没用,就把D:\Program Files (x86)\ ...

  3. date -d 对于时间的控制

    [root@ ~]# date "+%Y"2019[root@ ~]# date "+%Y%m%d"20190826 [root@localhost ~]# d ...

  4. 【leetcode】959. Regions Cut By Slashes

    题目如下: In a N x N grid composed of 1 x 1 squares, each 1 x 1 square consists of a /, \, or blank spac ...

  5. Python 直接赋值、浅拷贝和深度拷贝区别

    Python 直接赋值.浅拷贝和深度拷贝区别 转自https://www.runoob.com/w3cnote/python-understanding-dict-copy-shallow-or-de ...

  6. Vue学习笔记【20】——Vue中的动画(使用动画钩子函数)

    定义及使用钩子函数 定义 transition 组件以及三个钩子函数:  <div id="app">    <input type="button&q ...

  7. 阿里云文件存储(NAS)助力业务系统承载双十一尖峰流量

    2018天猫双11全球狂欢节,全天成交额再次刷新纪录达到2135亿元,其中总成交额在开场后仅仅用了2分05秒即突破100亿元,峰值的交易量达到惊人的高度,背后离不开阿里云大数据计算和存储能力的支撑.在 ...

  8. Github代码管理教程

    https://desktop.github.com/ 目录 Create and use a repository Start and manage a new branch Make change ...

  9. iptables对请求的URL作IP访问控制

    服务器运行环境是Tomcat,现在要实现的目的是,只允许特定的IP访问某个目录,一种方法是在tomcat配置文件server.conf中,使用RemoteAddrValve对虚拟主机做访问控制.另外一 ...

  10. (转)短信vs.推送通知vs.电子邮件:app什么时候该用哪种方式来通知用户?

    转:http://www.360doc.com/content/15/0811/00/19476362_490860835.shtml 现在,很多公司都关心的一个问题是:要提高用户互动,到底采取哪一种 ...