Jump to content

Adding custom icons within a text block

Go to solution Solved by abibacon,

Recommended Posts

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. 

Link to comment

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! 

Link to comment
  • 5 weeks later...
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?

Screenshot 2024-05-06 at 6.20.34 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Screenshot 2024-05-06 at 6.20.34 PM.png

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

image.png.4913f98e25a8973da7e0fe0a71352f11.png

#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" />

image.thumb.png.066e324553c6303387109616ddce37b5.png

#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;
}

image.thumb.png.77329f84ed07e3135d67f8dfbf611c9e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

 

image.png.0365e1b3f1695efb2b318d5bf8e2a90d.png

Can you share link to site? I can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Remove this icon item

image.png.5bc9d833c63ee9a6bf204cdd643ea7e5.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.