CODEWITHSUNDEEP
htmlcssjekyllfont-awesome
kingmakerking
kingmakerking

Reputation: 2089

Linking stylesheets in all the layouts in jekyll based sites

I am editing my blog which is based on jekyll. While I intend to have same header for all the pages in my blog theme, some of the pages miss picking up the css. Here is a short note on the folder structure.

The deafult.html which is in the_layout folder has the link to font-awesome stylesheet

<head>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>

The header.html which is in the _layout folder is as follows:

<header class="navigation">
  <a href="/" class="logo" title="blog home">
    <img src="/static/home.png" alt="home">
  </a>
  <nav>
    <ul>
      <li class="no-bullet"><a href="/"><i class="fa fa-keyboard-o" aria-hidden="true"></i> posts </a></li> |
      <li class="no-bullet"><a href="/archive"><i class="fa fa-archive" aria-hidden="true"></i> archive </a></li> |
      <li class="no-bullet"><a href="/about"><i class="fa fa-user" aria-hidden="true"></i> about </a></li> |
      <li class="no-bullet"><a href="/atom.xml" target="_blank"><i class="fa fa-rss-square" aria-hidden="true"></i> rss </a></li>
    </ul>
  </nav>
</header>

<h1 class="bigtitle">
   <i class="fa fa-user-secret" aria-hidden="true"></i>
 Blog title
</h1>
<h1 class="subtitle">
     Some blog
</h1>

<hr />

The index.md file in the archive folder begins as follows:

---
layout: post
title: Archives
skip_related: true
---

And the post.html in the _layout folder begins as follows:

---
layout: default
---

{% include header.html %}

The original index.md in the base folder has the following structure and displays all the font-awesome modules correctly.

---
layout: default
title: Blog Posts
---

However, the index.md in archieve folder does not show all of the font-awesome module.

More specifically, the <i class="fa fa-user-secret" aria-hidden="true"></i> remains blank.

To summarize:

What am I missing? Why does the index.md picks up all other font-awesome modules but not the one within h1 tag?

Upvotes: 1

Views: 415

Answers (1)

Christian Specht
Christian Specht

Reputation: 36421

In your default.html, you got the link to the font-awesome CSS wrong.

It looks like this:

<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

...but it should look like this:

<link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">

In other words, you just need to change css/... into /css/....

With the slash, it always links to the css folder at the root level:

http://example.com/css/font-awesome...

Your original code (without the slash), is a relative link to a css subfolder beneath the current folder.
Since default.html is embedded into each and every page and post in your site, the browser searches for the font-awesome files in a different folder depending on the location of the page.

In http://example.com/index.html, it goes to:

http://example.com/css/font-awesome...

(that's why your index page works)

But in http://example.com/archive/index.html, the link to font-awesome actually goes to this folder:

http://example.com/archive/css/font-awesome...

...which doesn't exist - that's why your archive page (and every other page in every folder which is not the root) doesn't pick up font-awesome.

Upvotes: 1

Related Questions