By r-m-n on

Hello everyone. This is my first post so please excuse me if it's in the wrong part of the forum. I have looked at issues for the relevant module but couldn't find what I needed.

I've set up a site using D8 and I've used Social Media Links Block and Field to get links in the very bottom footer region. It has given me the result I wanted, but the Font Awesome Instagram icon is the old one and I want the new one.

Can someone help me to understand how I can get the new icon to appear. Please bear in mind that I have fairly good knowledge of HTML and CSS but my PHP, JS, etc. is pretty rudimentary! So, I'd appreciate your having patience with me.

By the way, I'm a big fan of Drupal and I love the advances made from D7 to D8. Great work!

Rich.

⋅ Categories: Drupal 8.x

Comments

tajinder.minhas’s picture

tajinder.minhas commented

Hello r-m-n,

This module is loading library within module url for the library is //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css and this css is responsible for loading icons, if you want you can overwrite this css file in your theme.info.yml file or overwrite css property within css and make it !important if it not taking effect which i think should be last option to use.

Regards
Tajinder Singh Minhas
Software Engineer
(SDG SIPL)

r-m-n’s picture

r-m-n commented

Hello Tajinder.

Thank you for your reply. I am still a little confused. Where exactly do I have to look for the library //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css ? Or, how exactly can I overwrite the css file in my theme.info.yml?

Sorry for the newbie questions, and thanks again for your support.

Rich.

tajinder.minhas’s picture

tajinder.minhas commented

There is an option available where you can override where you can override existing library in your theme.ingo.yml file. Follow this link

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

libraries-override:
  fontawesome.component:
    css:
      component:
        //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css: { type: external }

This is the piece i think should work, i havent executed it but you can let me know

Regards
Tajinder Singh Minhas
Software Engineer
(SDG SIPL)

r-m-n’s picture

r-m-n commented

Thanks again for your reply. I have tried to apply the code you mentioned but have had no luck. I also tried to apply the url to the libraries.yml file, but that caused the site to crash.

The module I used to get the initial icons was fontawesome
Perhaps there is a module or library missing.

r-m-n’s picture

r-m-n commented

Sorry to bring this back up but I still can't get a solution.

My fontawesome.libraries.yml is like this:

fontawesome:
  version: 4.5.0
  css:
    component:
      /libraries/fontawesome/css/font-awesome.min.css: {minified: true }

fontawesome.cdn:
  version: 4.5.0
  css:
    theme:
      //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }

I assume that it's the fontawesome.cdn library that I have to override (to update from 4.5.0 to 4.7.0)

So I have tried adding the following to my theme.info.yml:

libraries-override:
  fontawesome.component:
    css:
      component:
        //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css: { type: external }

But there is no change to the Instagram icon after clearing the cache.

Any ideas?