使用 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 就是你给图标设置的样式。这个就用不多说了。


Warning: Missing argument 1 for cwppos_show_review(), called in /home/wwwroot/www.mycode.net.cn/wp-content/themes/flat/content-single.php on line 29 and defined in /home/wwwroot/www.mycode.net.cn/wp-content/plugins/wp-product-review/includes/legacy.php on line 18

Notice: Undefined variable: post_id in /home/wwwroot/www.mycode.net.cn/wp-content/plugins/wp-product-review/includes/legacy.php on line 20

发表评论