react引入阿里字体图标iconfont

2018-10-10 admin

1、将如下文件复制到public文件

clipboard.png

2、在public文件夹下的index.html引入iconfont.css,如

<link rel="stylesheet" href="./iconfont/iconfont.css">

3、使用如下

<i className="icon icon-qq"></i>

原文链接:https://segmentfault.com/a/1190000016639485

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42361.html

文章标题:react引入阿里字体图标iconfont

相关文章
一个适合新手的react小demo
之前一直都是在用vue,这两个月换了个公司,不过现在又离职了,这里什么框架都用, vue、angular、react,一般公司都是选二项技术去开发已经就够了, 要不是vue+angular或是react+angular个人觉得用了vue还来...
2018-01-11
超级给力的JavaScript的React框架入门教程
React 是 Facebook 里一群牛 X 的码农折腾出的牛X的框架。 实现了一个虚拟 DOM,用 DOM 的方式将需要的组件秒加,用不着的秒删。React 扮演着 MVC 结构中 V 的角色, 不过你要是 Flux 搭配使用, 你就有...
2017-03-27
js实现仿阿里巴巴城市选择框效果实例
本文实例讲述了js实现仿阿里巴巴城市选择框效果。分享给大家供大家参考。具体分析如下: 这并不是一个城市选择插件,在这里介绍只是为了mark一下二级联动的方法,此效果适用于有二级子菜单的效果,如导航栏、城市选择、类别选择等等。 样式效果是基于...
2017-03-25
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三方样式变小的问题
最近公司的的项目赶,作为前端的小白懒出新的高度,使出专业的技能 --复制粘贴!!(改别人的代码也是煎熬) 我经常做一些H5页面,这样就会遇到适配这个头疼的问题,我分享下我用经常用到的适配方案: 这里就不细说了 有大神总结 ,或者自行百度。 ...
2018-04-25
js+html5实现canvas绘制镂空字体文本的方法
本文实例讲述了js+html5实现canvas绘制镂空字体文本的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;canvas id=&q...
2017-03-24
create-react-app配置多页应用
背景:最近接手一个混合app项目,但是其中的页面都是用jquery写的,有点乱,所以决定用react重构一下,因为涉及到很多页面,所以create-react-app只能自己配置成多页的了。弄这个也弄了挺久的,主要是对webpack的各个...
2018-01-10
Reactjs实现通用分页组件的实例代码
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果: 注意这个组件需要ES6环境,最好使...
2017-03-01
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyphicons Halflings的相关文...
2017-02-28
React水印组件,支持图片水印,文字水印
React水印组件,支持图片水印,文字水印。 安装 npm i --save react-watermark-module 用法 import ReactWatermark from &#x27;react-watermark-modul...
2018-01-09
bootstrap为水平排列的表单和内联表单设置可选的图标
说明 为水平排列的表单和内联表单设置可选的图标. 示例 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;zh-CN&quot;&gt; &lt;head&gt; &lt;meta charset=&...
2017-03-17
回到顶部