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的图标库相当巨大 ...
随机推荐
- 编译Android源代码
硬盘空间需要在50G以上,最好100g 系统:ubuntu14.04 交叉工具链:arm-linux-gcc-4.5.1-v6-vfp-20120301 安装 Java 开发环境 $ sudo apt ...
- 同一子网建立ssh通道,映射到本地
在办公室有一台机器连入同一子网络,开启jupyter-notebook但是只能在这台机器上访问到,怎样可以在家也可以访问呢? 此时最简单的方法是在本地建立一个ssh通道: 在本地终端中输入 ssh u ...
- 解决Zookeeper报错:conf is not executed because it is not in the whitelist的解决办法
1.echo wchp | nc localhost 2181 ,通过路径列出服务器 watch 的详细信息,且它会输出一个与 session 相关的路径.但是出现下面的错误. [root@xg61 ...
- Django过滤器之safe
safe除了将html生成安全的文本外,还有将整型转为字符串: {% for user in user_list %} {% if user.id|safe == uid %} <li clas ...
- 理解 Java 序列化
一.什么是序列化 序列化是一种对象持久化的手段.类通过实现 java.io.Serializable 接口以启用其序列化功能. 序列化:把对象转换为字节序列的过程. 反序列化:把字节序列恢复为对象的过 ...
- Hive速览
一.概述 Hive由Facebook开源,是一个构建在Hadoop之上的数据仓库工具 将结构化的数据映射成表 支持类SQL查询,Hive中称为HQL 1.读模式 2.Hive架构 3.使用Hive的原 ...
- 如何在webpack中使用loader
一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...
- 云原生数据库崛起,阿里云POLARDB当选世界互联网领先科技成果!
第六届世界互联网大会来了!千年水乡古镇乌镇又一次吸引了全世界的目光. 刚刚,阿里云自研数据库POLARDB在会上当选世界互联网领先科技成果.POLARDB解决了企业在云时代的数据库难题,帮助企业在数小 ...
- php-数据库-分页类-上传类
config.ini.php <?php header("content-type:text/html;charset=utf-8"); //项目的根目录 define(&q ...
- PHP ftp_nb_get() 函数
定义和用法 ftp_nb_get() 函数从 FTP 服务器上下载一个文件并保存到本地一个文件中.(无阻塞) 该函数返回下列值之一: FTP_FAILED(发送/获取失败) FTP_FINISHED( ...