Switching fonts in the standard Casper theme leads to icons vanishing

I'm completely new to CSS and the Ghost Blog Platform. I've been trying to follow this set of instructions on how to customize the font in the basic Casper theme.

However, I've run into an issue with a specific line in the instructions that doesn't seem to be working as expected. This line is causing icons to disappear and the font of text behind the icons remains unchanged. 

[class^="icon-"]:before, [class*=" icon-"]:before

On another note, I've also been attempting to change my font to Work Sans. Below is the full code snippet that I have used.

<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700,500,600' rel='stylesheet' type='text/css'>
<style>
body,  
h1, h2, h3, h4, h5, h6,  
.main-nav a,
.subscribe-button,
.page-title,
.page-description,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family:"Work Sans", sans-serif; /* Replace with your preferred font */
}
</style>

Any tips or suggestions would be greatly appreciated!

cssfontsiconsghost-blog

Answer №1

After encountering a similar issue, I was able to determine the root cause of the problem. According to ghost academy guidelines, font changes can be implemented using the following code snippet.

body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer,
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "Georgia", sans-serif; /* Customize with your preferred font */
}

However, as mentioned, this code leads to the disappearance of icons. To maintain icon visibility while changing fonts, alternative coding practices must be utilized.

<style>
body,
h1, h2, h3, h4, h5, h6,
.main-nav a,
.subscribe-button,
.page-title,
.post-meta,
.read-next-story .post:before,
.pagination,
.site-footer {
    font-family: "Georgia", sans-serif; /* Customize with your preferred font */
}
</style>

<style>
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "casper-icons", "Open Sans", sans-serif;
}
</style>

Your font-related challenges should now be resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing Container Items using Flexbox

I have successfully created a small website using two flex containers, but now I want to know if it is possible to achieve the same layout with just one flexbox container on the parent class. I've been attempting to do this, but so far my efforts hav ...

htmlcssuser-interfaceflexbox

Go ahead and give a click to choose, select the desired item, and

I am looking to set up a scenario where I can copy items by clicking and selecting options. Take a look at this JSFiddle to see the scene with 1 Red, 1 Blue, and 1 Green box. #container { width:500px; height:600px; display:block; } #red { ...

htmlcssselectclickclone

CSS: Caption text below image remains on same line

I am struggling with positioning a div that contains an image and a caption. My goal is to make the caption break into a new line when it reaches 95% of the width of the image. Despite my efforts, I can't seem to achieve this. The text always pushes ...

htmlcss

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Having some issues with making my personal website work correctly. I'm planning to share images of how it looks at different widths - largest width and smallest width. Also, here are the links to my website here and to my GitHub code here Seeking gui ...

cssresponsive-designresponsiveweb-frontendresponsiveness

HTML/CSS: Issue with image grid layout where images of different heights are not wrapping correctly

I have a Wordpress-based web project in progress at the following link: The current setup of the post thumbnails grid on the website was done with the assumption that all thumbnails will be the same height. However, I am looking to modify it so that the t ...

htmlcsswordpressgrid

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

javascriptjqueryhtmlcss

Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active ...

javascriptjqueryhtmlcsstwitter-bootstrap

Align anchor tag text in the center vertically after adjusting its height using CSS

I'm having trouble vertically aligning the text within an anchor tag that has a height and background color set. The goal is to have equal amounts of space above and below the text, but currently all the extra height is being added below the text. I&a ...

htmlcss

Is it possible to display a div in front of a menu when clicking on the home, contact, blog, or services page?

Passionate Web Developer I am fascinated by the captivating effects that CSS 3D dimensions create on the screen. It feels like being immersed in a 3D realm and designing it is an exhilarating experience. I am truly enamored by this aspect of web developm ...

javascriptjqueryhtmlcssajax

The link in the href is unresponsive to clicking

I'm having trouble with my header links not working. I've tried adjusting the z-index, changing href=. . to href=, and removing APdiv, but none of these solutions have worked. Another issue I noticed is that I can't highlight the text in the ...

htmlcss

Challenges with text wrapping in a continuously scrolling container in CSS

I am currently developing a project that requires infinite horizontal scrolling for cells containing thumbnails and text. While most of the functionality is in place, I am facing an issue with text wrapping. The CSS and HTML code are provided below. The fi ...

htmlcss

Guide on obtaining an obscure style guideline in MS Edge using JavaScript

If you are looking to utilize the object-fit CSS rule, keep in mind that it is not supported in MSIE and MS Edge Browsers. While there are polyfills available for IE, none of them seem to work in Edge from my experience. For instance, the polyfill fitie b ...

javascriptcssmicrosoft-edgeobject-fit

What is the best way to adjust the height of a Div to be 100%?

I've been struggling to make the .footer and the div .content have a height of 100%. While I know how to get the footer to stick at the bottom, I can't seem to make the content div reach the bottom of the page. Increasing the min-height on the co ...

jqueryhtmlcsswordpress

In order to modify the navigation bar color, you must include the overflow property

As I work on my product landing page, I encountered an interesting issue when trying to change the color of the navigation bar. It seems that I can only do so after adding the overflow property to the ul element. Can someone shed some light on why this is ...

cssoverflownavigationbar

Link the Sass variable to Vue props

When working on creating reusable components in Vue.js, I often utilize Sass variables for maintaining consistency in colors, sizes, and other styles. However, I recently encountered an issue with passing Sass variables using props in Vue.js. If I directly ...

javascriptcssvue.jssass

Create a four-div grid that dynamically adjusts its height to match the tallest element

Seeking a way to design a grid layout that automatically adjusts the height of child divs to match the tallest one in each row. In a 2x2 grid scenario, where each div contains text, the div with the most content should determine the height for the rest. I ...

javascriptjquerycssflexbox

How to use multiple class names with Next.js module CSS

Currently, in my project I am utilizing Next.js along with module.css. However, I have encountered an issue. There is a "button" component nested inside another component. I am trying to apply both a normal className and Style.myClass to this button compon ...

cssreactjsnext.js

When the user clicks on the login text field or password field, any existing text will

Currently, I am working on the login section of my website and I would like to implement a similar effect to Twitter's login form, where the Username and Password values disappear when the Textfield and Password field are in focus. I have attempted to ...

javascriptjqueryhtmlcss

What steps should I take to ensure proper spacing on my website? (admin inquiry)

I'm currently working on a website called www.confiam.com.br, which is a project built with Django. While making some adjustments recently, I unintentionally broke something related to the formatting of paragraphs. Now, the spacing doesn't seem r ...

htmlcssdjango

Switching the font style for the placeholder text

Can an input field have a different font-family for its text compared to its placeholder? I attempted to change the font-family of an input's placeholder using a pre-defined @font-face in CSS, but it didn't work: CSS .mainLoginInput::-webki ...

cssinputstylesheetfont-faceplaceholder