bootstrap fonts / glyphicons

[bamhost]

Hello all,

Glyphicons are not loading. Before I spend days searching thought I'd just ask here if these are not included in bootscore?

Thank you bunches!

[crftwrk]

What do you mean? Glyphicons are deleted since Bootstrap 4. bootScore uses Fontawesome, if you want to use Bootstrap icons you can install them in your child.

[bamhost]

Thank you crftwrk...call it brain fog. Sorry for the bother.

[crftwrk]

You're welcome 😉

[bamhost]

Hello crftwrk,
I'm having a problem and realize this has absolutely nothing to do with bootscore, if you do not have time to give me some guidance, I completely understand and all you have to do is tell me.

I have a difficult issue with a plugin that for the time being I have to use. The plugin has not updated the bootstrap version, and still uses the glyphicons. I have dequeued to remove their styles and the bootstrap version. Everything is working perfectly "except for" the glyphicons not showing...due to, as you said, being removed in bootstrap 4. I found an article here on github that provides the map to map all glyphicons to the appropriate fontawesome icons. Here is the article https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

The problem I am having is compiling that into bootstrap. When I add it to either the bootscore_custom.scss or bootscore_variable.scss it results in a compiler error "issue with compiler" and results in a 500 error. My knowledge of compiling scss is next to null, that's why I use bootscore because it makes it simple and does it beautifully.

Can you lend any guidance at all?

Thank you for your time.

[crftwrk]

Enable the dev_mode https://bootscore.me/documentation/theme/bootstrap-css-sass/#Developer_mode for detailed information what's and where went wrong in the compiler.

But at first glance, I guess the first two lines doing the error because they import a file that does nor exist.

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome';

Simply remove those lines and it should work fine. Fontawesome is already installed, no need to import anything.

Solved?

[bamhost]

Yeah, I did try that because I knew that fontawesome was already installed. I did enable developer mode, and added the code without the first 2 lines, first to the bootscore_custom.scss file and still got the error. removed it from there and added it to the bootscore_variables.scss, same thing. I must be doing something wrong.

Here are the errors with dev mode enabled: Any ideas?

added to the bootscore_custom.scss:
bootScore SCSS Compiler - Caught exception:
".glyphicon" failed to @extend ".fa". The selector ".fa" was not found.: wp-content/themes/bootscore-child-main/scss/_bscore_custom.scss on line 9, at column 3

added to the bootscore_variables.scss:
bootScore SCSS Compiler - Caught exception:
".glyphicon" failed to @extend ".fa". The selector ".fa" was not found.: wp-content/themes/bootscore-child-main/scss/_bscore_custom.scss on line 73, at column 3

[crftwrk]

Ok, got it. Fontawesome isn't part of SCSS, so you have to make FA ready for this.

1. Dequeue Fontawesome

Child's functions.php

//Dequeue Fontawesome
function dequeue_fontawesome_styles() {
  wp_dequeue_style( 'fontawesome' );
   wp_deregister_style( 'fontawesome' );
}
add_action( 'wp_print_styles', 'dequeue_fontawesome_styles' );

2. Webfonts

Go in main theme to folder fontawesome and copy the folder webfonts to your child's root folder.

3. SCSS

• Go in main theme to folder fontawesome/css, copy all.min.css to your child's folder scss and rename file to _all.scss.
• Open in the same folder main.scss and add @import "all"; as first line before @import "bscore_variables"; .

Now SCSS is used and you can extend icons.

4. Heavy part

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9. The selectors are from a very old FA version that not exists in FA6 anymore. Unfortuately they will not work and you must update all of them otherwise compiler will throw an error.

For example:

.glyphicon {
  @extend .fa;
  &.glyphicon-cloud {
    @extend .fa-cloud;
  }
}

goes to

.glyphicon {
  @extend .fa-solid;
  &.glyphicon-cloud {
    @extend .fa-cloud;
  }
}

Or simply @extend only those icons you need.