专栏首页jiajia_deng使用 Fontawesome 的 React 组件

使用 Fontawesome 的 React 组件

Fontawesome 是一套图表字体库框架,我们经常在项目中用到它的各式各样的图标,本文介绍的是如何使用其 React 组件形式的包应用到项目中。

安装

使用 npm 命令来安装 react-fontawesome 包。

npm install react-fontawesome --save

导入 css

在项目的 head 标签中的导入 fontawesome 的 css 样式表。以下我给出的是一个 CDN 的地址,你可以自己找其他地址。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

使用

在某个组件中,你只需要先导入 react-fontawesome 包。然后直接把它的组件写上去就可以了。

import FontAwesome from 'react-fontawesome';

比如我们要显示一个向上的箭头图标,就像下面一样在 render 函数中调用即可。

<FontAwesome
  name='angle-double-up'
  style={{ fontSize: "17px" }}
/>

name 属性就是你要用的 icon 的名字,一般官网给出的 icon 名字都带有 fa- 前缀,你去掉就可以了。stype 就是你给图标设置的样式。这个就用不多说了。

相关

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于 git flow + gitlab 协作开发:01

    很久以来,我一直在寻找一个适合小型团队独立项目的 git 协同工作流。主要原因是实际工作中很难在繁忙的迭代中兼顾真正的协同和代码质量管理。造成的现象就是在一个以...

    我与梦想有个约会
  • 解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

    最近一直在跟着 react 官网和一些国内成熟的视频教程学习一些 react 的技巧和做一些小项目。这几天碰到一个问题就是使用 新版的 react-router...

    我与梦想有个约会
  • Redux 学习笔记:创建一个用 Redux 管理的 React 组件流程

    这几天看 Redux 的资料看的简直发疯,每次都看到睡着。今天下午睡了整整 4 个小时,在今晚安静的时候攻坚了一下 Redux。幸亏网上有很多靠谱的资料,不然我...

    我与梦想有个约会
  • 获取.NET Core应用的版本号

    我们可以给.NET Core应用定义版本号,但如何在程序运行时读取呢?有几种做法。

    Edi Wang
  • react-redux

    React-Redux是Redux的官方React绑定。 它允许您的React组件从Redux存储中读取数据,并将操作分派给存储以更新数据。 它由二个重要的部...

    _kyle
  • [深度学习工具]基于PyTorch的NLP框架Flair

    以下是使用Flair 重现这些数字的方法。您还可以在我们的论文中找到详细的评估和讨论:

    小宋是呢
  • 基础知识 | 每日一练(20)

    士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

    闫小林
  • 查找一个基因的启动子序列

    Y大宽
  • 动态库与静态库小看法

    Qt君
  • js逆向技巧分享

    比如搜索的关键是 password, 直接搜索password搜到的结果比较多, 我们可以进行精准的搜索, 如:

    Python高效学习

扫码关注云+社区

领取腾讯云代金券