Academic-icons not showing

Hello everyone,

I am creating my portfolio website, using raditian theme.

I want to add ai-google-scholar from academicons package to showcase section. But goog-scholar icon is not showing, although LinkedIn and Github icons (from the theme’s css) appear normally.
image

What I did:

  • Put academicons folder inside themes\raditian-free-hugo-theme-data-science\static\css

  • In config.yaml:

  plugins:
    css:
      - URL: css/main.css
      - URL: css/rad-icons.css
      - URL: css/academicons/css/academicons.css
      - URL: css/custom.css

  • change in themes\raditian-free-hugo-theme-data-science\layouts\partials\showcase.html:
    <div class="row platform-links">
      <div class="col-12">
        {{ range .Site.Data.homepage.showcase.socialLinks }}
        <a href="{{ .URL | absURL }}" target="_blank">
          <i class="{{.icon_pack}} {{.icon_pack}}-{{ .icon }}"  style="color:black"></i></a>
        {{ end }}
      </div>
    </div>
  • in home.yaml:
  socialLinks:
    - icon: "linkedin-line"
      icon_pack: "icon"
      URL: "XXXXX"

    - icon: "github-line"
      icon_pack: "icon"
      URL: "XXXX"

    - icon: "google-scholar"
      icon_pack: "ai"
      URL: "XXXX"

It appears in html file:

  • head:
<link rel="stylesheet" href="//localhost:4321/css/main.css">
<link rel="stylesheet" href="//localhost:4321/css/rad-icons.css">
<link rel="stylesheet" href="//localhost:4321/css/academicons/css/academicons.css">
<link rel="stylesheet" href="//localhost:4321/css/custom.css">
  • body:
<div class="row platform-links">
      <div class="col-12">
        
        <a href="XXX" target="_blank">
          <i class="icon-linkedin-line"></i></a>
        
        <a href="XXXX" target="_blank">
          <i class="icon-github-line"></i></a>
        
        <a href="XXX" target="_blank">
          <i class="ai-google-scholar"></i></a>
        
      </div>
    </div>

What did I do wrong? How to fix it? I’m totally new to Hugo :frowning_face: Thanks much.

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

Thanks, @jmooring. I was able to resolve it mins ago.
I need to change from::

class=" {{.icon_pack}}-{{ .icon }}" 

to

class="{{.icon_pack}} {{.icon_pack}}-{{ .icon }}" 

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.