Adding custom icons within a text block

Hello, 

I'd like to add custom icons in place of some words in a text box, and am trying to figure out custom css for that. For example "I have a dog" but replace the word dog with a custom icon of a dog. First time posting so let me know what other information is needed! Ideally this would be code where I can just drop the custom image info in, so that I can apply it in multiple places and for multiple words/icons. 

Hey @Jbenhaim, with CSS we can add custom icons before a text block but are unable to replace specific words. This is something you'd be able to achieve with Javascript instead.

Thanks! I'm not sure I explained it well - I'm not trying to have the custom icon replace a word as I type. I'd like to drop the icon in, in between text words - word icon word. Just want to make sure it's definitely not doable! 

Perfect that worked! Only thing is the image is huge - where would I put in to adjust the size? 

On 4/5/2024 at 11:53 PM, Jbenhaim said:

Perfect that worked! Only thing is the image is huge - where would I put in to adjust the size? 

You can add width to code

<img src="https://picsum.photos/20/30" width="100px">

What if you want an home icon for the word "HOME" in the navigation like in this example?

On 5/7/2024 at 6:23 AM, LulubelleDesignStudio said:

What if you want an home icon for the word "HOME" in the navigation like in this example?

You can add Home item, then share site url, we can give the code to replace Home item with Home icon

On 5/7/2024 at 6:23 AM, LulubelleDesignStudio said:

What if you want an home icon for the word "HOME" in the navigation like in this example?

This is guide for Squarespace 7.1 version. With 7.0, it will require a different code.

#1. First, you add a Link item to Navigation with Name/URL

#2. Use this code to Code Injection Header (or use Code Block in Site Footer if your plan doesn't support Code Injection)

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#3. Use this code to Custom CSS box

header#header a[href="#home"] {
    font-size: 0;
}
header#header a[href="#home"]:before {
    content: "\f015";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 18px;
}

Thank you! it added the icon but it doesn't link to the home page. Is there a way if you click on it it will take you to the home page without having to have the word HOME also?

On 5/10/2024 at 2:38 AM, LulubelleDesignStudio said:

Thank you! it added the icon but it doesn't link to the home page. Is there a way if you click on it it will take you to the home page without having to have the word HOME also?

 

Can you share link to site? I can check easier

https://treetopnigerians.squarespace.com/

Password: Treetop

On 5/11/2024 at 7:34 PM, LulubelleDesignStudio said:

https://treetopnigerians.squarespace.com/

Password: Treetop

Remove this icon item

Use this new code to turn "Home" text to Home icon

header#header a[href="/"] {
    font-size: 0;
}
header#header a[href="/"]:before {
    content: "\f015";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 18px;
}

Thank you that worked perfect!

Hey! our dear Becca of @inside_the_square has what you need:
https://insidethesquare.co/squarespace-tutorials/image-in-text