CODEWITHSUNDEEP
font-awesomeruby-on-rails-6
merovingian
merovingian

Reputation: 45

Fontawesome pro and rails 6

I'm trying to get fontawesome pro to work with rails 6.

I was successfully able to get fontawesome-free working with rails 6 and webpacker, but I can't get webpacker to successfully compile with fa-pro. I've tried tweaking to get webpack to compile using something like the code below, but was unsuccessful.

I've installed the following node_modules via Yarn

fortawesome
fontawesome-commont-types
free-brands-svg-icons
pro-light-svg-icons
pro-regular-svg-icons
pro-solid-svg-icons

app/javascript/stylesheets/application.scss


@import "~bootstrap/scss/bootstrap";
$fa-font-path: '~@fortawesome/<NOT SURE>';
@import '~@fortawesome/fontawesome-common-types';
@import '~@fortawesome/free-brands-svg-icons';
@import '~@fortawesome/pro-light-svg-icons';
@import '~@fortawesome/pro-regular-svg-icons';
@import '~@fortawesome/pro-solid-svg-icons';

I've also added the following to the projects .npmrc @fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken= TOKEN HIDDEN

Not sure what I'm missing. Any thoughts or direction would be greatly appreciated.

Upvotes: 2

Views: 1633

Answers (2)

rndrfero
rndrfero

Reputation: 322

Inside application.js:

import("@fortawesome/fontawesome-pro/js/all");

According to this:

https://medium.com/@kelishrestha97/how-to-install-font-awesome-with-yarn-in-rails-6-0-c2506543c13d

Upvotes: 1

merovingian
merovingian

Reputation: 45

Turns out I had a few different issues. Per this post here placing the "@fortawesome:registry=https://npm.fontawesome.com/" in my projects .npmrc file was not allowing me to download via yarn.

now, I have the following installed package.json

"@fortawesome/fontawesome-pro": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-regular-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",
"@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/pro-light-svg-icons": "^5.11.2",
"@fortawesome/pro-regular-svg-icons": "^5.11.2",
"@fortawesome/pro-solid-svg-icons": "^5.11.2",

From here I added the correct imports to my /app/javascripts/packs/application.js

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
library.add(fas)
dom.watch()

Basically, I followed the post listed above and this post to get pointed in the right direction.

Upvotes: 0

Related Questions