Social/academic icons not visible

[luca-scr]

While I was working on my web site I realised that the social/academic icons related to Twitter, GoogleScholar, ResearchGate, etc. are not visible on my old MacBookPro (1280x800 display). I checked the demo available at https://sourcethemes.com/academic/ and the same behaviour is present (see attached image). However, social/academic icons are visible with Google Chrome. Furthermore, on iPhone, iPad and iMac social/academic icons are always visible. I guess there is something related with CSS or with Safari but I'm not able to figure out.

[gcushen]

You could try adding disable_sri = true under the [params] part of your config.toml. Possibly may help.

[luca-scr]

Nothing changed.

[gcushen]

It may be related to #165 - i.e. using very old web browsers that do not support current HTML5/CSS3 web standards. Updating the browser, if possible, may help.

[luca-scr]

The browser is Safari updated to the latest version 10.1.1. This version shows fine the web page on iMac but not on a MacBookPro 13''. Old browsers usually show the social icons vertically instead of horizontally. In this case the social icons are completely missing.

[seisman]

I have the same issue.

• MacBook Pro (Retina, 13-inch, Early 2015)
• macOS Sierra 10.12.6
• Safari 10.1.2

[seisman]

I fixed this issue by changing social-icon to social-test in layouts/partials/widgets/about.html and static/css/hugo-academic.css. However, I don't understand why this works.

[seisman]

I think this issue is related to Adblock Plus's Fanboy's Social Blocking list, in which social-icon is blocked. It seems that AdBlock Plus for Safari enables this blocking list by default, while AdBlock Plus for Chrome doesn't. This explains why these icons are invisible only for some Safari.

Maybe we can change social-icon to a new name to avoid being blocked?

[luca-scr]

I can confirm that after disabling Adblock on MacBookPro using Safari the social icons are now visible. The strange thing is that Adblock appears to hide the icons only on Safari running on MacBookPro machines and not on iMac.

[gcushen]

@seisman thank you very much for investigating the issue and discovering the cause.

I'm going to close this thread as the issue should be resolved in #276 by renaming the CSS (although the authors of the advert blocking plugins/lists should really correct it in their code/list instead).

[fzhangcode]

Hi! I have the same problem. I can see the email icon, but not twitter icon.

I have added this piece code to "themes/hugo-academic/layouts/partials/widgets/contact.html":

     <li>
       <i class="fa-li fa fa-twitter fa-2x" aria-hidden="true"></i>
       <span>
       <a href="https://twitter.com/{{ . }}">{{ . }}</a>
       </span>
     </li>
     {{ end }}

And added this to config.toml:

    icon = "twitter"
    icon_pack = "fa"
    link = "https://twitter.com/FanZhang_Jessie"```

How to deal with this? 

Thanks,
Fan

[JOduMonT]

@fzhangcode hopefully by now you found the solution, but just in case twitter is a business

     <li>
       <i class="fa-li fa fa-twitter fa-2x" aria-hidden="true"></i>
       <span>
       <a href="https://twitter.com/{{ . }}">{{ . }}</a>
       </span>
     </li>
     {{ end }}
And added this to config.toml:

    icon = "twitter"
    icon_pack = "fa"
    link = "https://twitter.com/FanZhang_Jessie"```

How to deal with this? 

so you have to use fabnot just fa they (font-awesome) change the way to call their icon so your icon_pack = "fab" would be your solution

---

now if you want it big like fa-2x you could simply do like thie

    icon = "twitter fa-2x"
    icon_pack = "fab"
    link = "https://twitter.com/FanZhang_Jessie"

by the way if you want them in the navbar you have better chance to do it right via your authors/fzhangcode/_index.md where you will list it like this:

social:
- icon: 'twitter fa-2x'
  icon_pack: fab
  link: 'https://twitter.com/FanZhang_Jessie'
  label: ''
  display:
    header: true
    footer: true

[jjcfrancisco]

cdn=true fixed it for me.