fontawesome 官方使用教程=>点我

import { FaLanguage } from 'react-icons/fa'; //https://react-icons.netlify.com/

react-blog

npm i --save @fortawesome/fontawesome-svg-core@prerelease \
npm i --save @fortawesome/free-solid-svg-icons@prerelease \
npm i --save @fortawesome/react-fontawesome@prerelease

入口文件引入

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel(图标样式以fa为前缀) } from '@fortawesome/free-solid-svg-icons' library.add(faStroopwafel)

组件中使用

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' export const Food = () => (
<div>
Favorite Food: <FontAwesomeIcon icon="stroopwafel" /> 不需要前缀
</div>
)

react 使用fortawesome字体图标的更多相关文章

  1. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  2. react中iconfont字体图标不显示问题

    如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...

  3. react使用阿里字体图标

    1. 在react项目的public文件夹下面创建iconfont文件夹,将下载的文件放到iconfont文件夹下 2.在public文件夹下的index.html引入iconfont.css,如 & ...

  4. React Native 开发豆瓣评分(六)添加字体图标

    添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...

  5. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  6. icon font字体图标字库汇总

    最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...

  7. [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------- ...

  8. 在WPF中使用FontAwesome之类的字体图标

    我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression ...

  9. 00字体图标iconfont的制作与使用--阿里矢量图库

    一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...

随机推荐

  1. 【关于selenium自动化中,Webdriver的原理以及工作流程】

    原文地址:https://www.cnblogs.com/imyalost/p/7242747.html#4109245 作者:老 张 1.关于Webdriver 设计模式:按照Server-Clie ...

  2. C# 文件读写Helper类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  3. 为什么一定要学Go语言

    Go语言是谷歌2009发布的第二款开源编程语言.Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 为什么要选择学习Go ...

  4. 【Python】二进制转ASCII码小脚本

    #coding:utf-8 #developed by carrypan! import binascii import optparse def main(): usage="%prog ...

  5. CDH集群安装配置(二)- 公共环境的配置和虚拟机的克隆

    1. 配置网络-ip地址设置静态 vi /etc/sysconfig/network-scripts/ifcfg-eth33 增加如下配置 ONBOOT=yes BOOTPROTO=static IP ...

  6. React条件性渲染

    React条件性渲染的方式和Vue是不同的,之前用vue做项目时觉得vue是在是强大,通过v-if就可以选择性的渲染组件,另外,对于列表的渲染更是方便,一个v-for就可以进行快速的渲染,但是Reac ...

  7. LeetCode 100.相同的树(C++)

    给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1 ...

  8. Mongodb定时备份脚本和清除脚本

    Mongodb用的是可以热备份的mongodump和对应恢复的mongorestore,在linux下面使用shell脚本写的定时备份,代码如下 1.定时备份 #!/bin/bash sourcepa ...

  9. CCF 201409-4 最优配餐

    问题描述 试题编号: 201409-4 试题名称: 最优配餐 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么 ...

  10. Java入门系列-25-NIO(实现非阻塞网络通信)

    还记得之前介绍NIO时对比传统IO的一大特点吗?就是NIO是非阻塞式的,这篇文章带大家来看一下非阻塞的网络操作. 补充:以数组的形式使用缓冲区 package testnio; import java ...