React-fontawesome: Functionality Question

[johnnunns]

Hey guys,

Love the library, but have a noob question. I have a react app that is using pseudo-selectors in order to pull off some effects incorporating the font awesome icons. Seems if I have to use pseudo-selectors the documentation states I need either a script tag or to pull the whole file into my project and import it from there. If I'm forced to do that though, is there any reason for me to use this library? I like the idea of pulling in only what I need, but it seems like I'll have to pull in the entire fontawesome file which makes this seem pointless. Am I missing anything here? Would love some guidance!

[robmadole]

Hey @johnnunns. So what exactly are the pseudo-selectors doing? If you are relying on pseudo-selectors to replace your <i> tags with <svg> in your React project you are definitely doing it the wrong way. We'll be happy to get you straightened out though ;)

[johnnunns]

Thanks @robmadole for the quick response. I am using React Inline Edit Kit (RIEK) library in order to create an input that's editable on Click. Unfortunately, the RIEK library hasn't built a way to create a ref that I can run an open() function on to initiate the edit mode. So to give the edit icon the functionality of the onclick the riek input has, I've been using the scss solution:

.editableText {
&::after {
font-family: FontAwesome 5 Pro;
font-size: 12pt;
content: "\f040";
margin-left: 8px;
color: #F8B97F;
vertical-align: top;
cursor: text;
}
}

Is this the most efficient way of pulling this off? Does the use of this react library make sense if this effect is going to force me to use a tag in the header?

[robmadole]

Hmm, if you are using that library you might be better off switching to Web Fonts with CSS. We haven't tried pseudo elements in tandem with react-fontawesome and we honestly don't know what will happen.

Here are the docs for Web Fonts: http://fontawesome.com/get-started/web-fonts-with-css

We also have these available as NPM packages: https://www.npmjs.com/package/@fortawesome/fontawesome-free-webfonts

If you have any more questions I'll be happy to re-open this.

[eqyiel]

@johnnunns and future travellers, you can achieve it like this using styled-components:

import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

const ListItem = styled.li`
  &:before {
    content: url(data:image/svg+xml,${encodeURIComponent(renderToString(<FontAwesomeIcon icon={faGithub} />))});
  }
`;

[wispyco]

How would one go about changing the color of the content item? I can only get it as black. @eqyiel

[robmadole]

This should fix you up @wispyco !

const ListItem = styled.li`
  &:before {
    color: blue;
    content: url(data:image/svg+xml,${encodeURIComponent(renderToString(<FontAwesomeIcon icon={faGithub} />))});
  }
`;