3

I'm trying to add Font Awesome to a Bootstrap subtheme I have made.

Here is the code I am using in subtheme.libraries.yml, which is based on the documentation for hosting external JS libraries in Drupal 8:

font-awesome:
  remote: https://fortawesome.github.io/Font-Awesome/
  version: 4.5.0
  license:
    name: MIT
    url: https://fortawesome.github.io/Font-Awesome/license/
    gpl-compatible: true
  css:
    https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }

Unfortunately this results in a WSOD. The error log gives these two errors:

Warning: constant(): Couldn't find constant CSS_HTTPS://MAXCDN.BOOTSTRAPCDN.COM/FONT-AWESOME/4.5.0/CSS/FONT-AWESOME.MIN.CSS in Drupal\Core\Asset\LibraryDiscoveryParser->buildByExtension() (line 143 of /srv/bindings/code/core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).

And:

Warning: Illegal string offset 'weight' in Drupal\Core\Asset\LibraryDiscoveryParser->buildByExtension() (line 143 of /srv/bindings/928c941920f8443d9e50a3d908967fee/code/core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php).

0

3 Answers 3

2

If you have the same code from your question in your subtheme.libraries.yml file, but it isn't showing up, you still need to add that library to your subtheme.info.yml file

subtheme.info.yml

name: Subtheme Name
type: theme
description: 'A theme description.'
core_version_requirement: ^8 || ^9
base theme: bartik
libraries:
  - subthemename/global-styling
  - subthemename/font-awesome
  - subthemename/bootstrap

subtheme.libraries.yml

global-styling:
  css:
    theme:
      css/styles.css: {}
  js:
    js/scripts.js: {}

font-awesome:
  remote: https://fortawesome.github.io/Font-Awesome/
  version: 4.5.0
  license:
    name: MIT
    url: https://fortawesome.github.io/Font-Awesome/license/
    gpl-compatible: true
  css:
    theme:
      https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }

bootstrap:
  remote: https://getbootstrap.com/docs/5.1/
  version: 5.1
  license:
    name: MIT
    url: https://getbootstrap.com/docs/5.1/about/license/
    gpl-compatible: true
  css:
    theme:
      https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css: { type: external, minified: true }
  js:
    https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js:  { type: external, minified: true }

Put another way, you first need to specify the library names in your info.yml file then define them in your libraries.yml file.

2

My understanding was that for a sub theme you defined the CSS as such:

global-styling:
  css:
    theme:
      css/style.css: {}

...as discussed here: https://www.drupal.org/node/2165673

2
  • Yes, 'theme' is missing and likely will resolve it. However, it does not seem that the docs page mentions external CSS, only external JS.
    – Kevin
    Jan 28, 2016 at 17:03
  • I also needed to add subtheme/font-awesome to subtheme.libraries.yml. Jan 29, 2016 at 3:47
1

This worked for me, as of the 8.0.4 core release:

googlefonts-ptsans:
version: 1.0
license:
  name: google fonts
  url: https://www.google.com/fonts#AboutPlace:about
  gpl-compatible: true
css:
  base:
    https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700italic,700: {}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.