Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use it with React FontAwesome component?

See original GitHub issue


Would be great to replace icons with React FontAwesome component.

I have no idea what is the rbc rbc-* icons do you use into React Bulma component, for example, Dropdown component? But…

Code is:

import React, { Component } from 'react';

import Hero from 'react-bulma-components/lib/components/hero';
import Dropdown from 'react-bulma-components/lib/components/dropdown';

class SliderHero extends Component {
  render () {
    return (
      <Hero size="fullheight" color="link">
          <Dropdown hoverable>
            <Dropdown.Item value="item">
              Dropdown item
            <Dropdown.Item value="other">
              Other Dropdown item
            <Dropdown.Item value="active">
              Active Dropdown item
            <Dropdown.Item value="other 2">
              Other Dropdown item
            <Dropdown.Item value="divider">
              With divider

export default SliderHero;

HTML is:

<section className="hero is-link is-fullheight">
  <div className="hero-body">
    <div className="dropdown is-hoverable">
      <div className="dropdown-trigger" role="presentation">
        <a tabIndex="0" className="button">
          <span>Dropdown item</span>
          <span className="icon is-small"><i className="rbc rbc-angle-down"></i></span>
      <div className="dropdown-menu" id="dropdown-menu" role="menu">
        <div className="dropdown-content">
          <div title="item" role="presentation" className="dropdown-item">Dropdown item</div>
          <div title="other" role="presentation" className="dropdown-item">Other Dropdown item</div>
          <div title="active" role="presentation" className="dropdown-item">Active Dropdown item</div>
          <div title="other 2" role="presentation" className="dropdown-item">Other Dropdown item</div>
          <hr className="dropdown-divider">
          <div title="divider" role="presentation" className="dropdown-item">With divider</div>

And output is:

screen shot 2018-06-16 at 20 03 05

How to solve this OR use FontAwesome instead strange rbc-* icons? Please help me.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:16 (13 by maintainers)

github_iconTop GitHub Comments

LaRuaNacommented, Jun 21, 2018

Honestly i also didn’t understand exactly how to use Icon component but this was my solution:

import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import Icon from 'react-bulma-components/lib/components/icon';
import faUserPlus from '@fortawesome/fontawesome-free-solid/faUserPlus';

            <FontAwesomeIcon icon={faUserPlus} />
coudscommented, Jun 17, 2018

Hi @koddr Can you show me your webpack configuration and how are you importing the Dropdown component? (I was not able to replicate the missing icon).

About the icon set I only include the angle-down there are no icons inside the library that mean to be used externally, the idea of the Icon component its to be composed to generate the Icons you need your your project and avoid to be attached to a icon library.

If you want to use React-bulma-components with FA you can do it (see this example code to get an idea).

btw: the class rbc-* its from React-Bulma-Components =)

Read more comments on GitHub >

github_iconTop Results From Across the Web

React | Font Awesome Docs
Font Awesome now has an official React component that's available for a friction-less way to use our icons in your React applications.
Read more >
How To Use Font Awesome 5 with React - DigitalOcean
Step 1 — Using Font Awesome · Step 2 — Choosing Icons · Step 3 — Installing Font Awesome · Step 4 —...
Read more >
How to include a Font Awesome icon in React's render()
Create a directory 'fontawesome' in the 'public' directory of your react app. · Copy the 'css' and 'webfonts' directories from the downloaded zip...
Read more >
Using Font Awesome 5 with React - LogRocket Blog
Working with the Font Awesome API ; // copied from the official docs import React ...
Read more >
How to Add and Use Font Awesome 5 in React App
Step 1: Install React Project · Step 2: Add Bootstrap Package · Step 3: Add Font Awesome Package · Step 4: Use Solid...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found