Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'icon'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

Found 29 results

  1. Site URL: https://matey.app Hi, is there a way to customize the thickness of the lines of the mobile burger icon and X icon? I'd like to make them thicker and add a rounded edge to them. Thanks!
  2. Site URL: https://www.genzwearethefuture.org/ On the contact page, there is a place where i put social links and i want to find out if there is a way i can change the link icon into the tiktok icon.
  3. Site URL: https://joshmgyates.com I'm using the Wells template and cannot find a way to have an instagram icon link appear in my header content when in mobile or tablet view. It appears on a desktop view only. Help is appreciated, thank you
  4. Hi there, I'm making a website for a music festival and I've linked the festival's instagram/facebook and mail to the homepage as well as to the contact page. I've made seperate pages for each band that's playing the festival and I want to link their social media accounts so when I added a social media block for one band, I checked the homepage and contact page and the social media accounts for the festival have been replaced with the social media account for one band. Is there a way to link social media accounts independently on each page? Hope this makes sense! Thanks
  5. Site URL: https://www.lavender0lilacs.com Hello, I'm trying to add a custom icon that will show up when my website is saves as a home screen bookmark on devices like an iPhone. I've followed these directions: https://support.squarespace.com/hc/en-us/articles/205815228-Adding-a-site-icon-on-iOS-devices So far I've managed to get my icon to show up if I add the bookmark to favorites on iOS Safari, but no luck with the homescreen. My image is a 150x150 png, and this is the code I've added to the header portion of the code injection: <!-- Apple touch icon --> <link rel="apple-touch-icon" href="/s/apple+icon.png"> Any suggestions?
  6. Site URL: https://trombone-chartreuse-l445.squarespace.com/ Hello, I'm trying to have my Shopping Cart icon replaced by text saying : "Shopping Bag (qty)" – styled the same way as the nav links – but keeping the default Shopping Cart icon for the mobile version only. Is that possible? Thanks in advance! 🙂
  7. Site URL: http://www.palmettehome.com Hi! I'm wanting to change the stock cart/bag icons to a custom bag image I've created. I found some code online but it's not working. Is this possible? I have a .PNG file created and uploaded in my managed files. For reference, here is the code I found as a starting point. I did insert the URL path to the image in the code in the custom CSS section. Per their video, the cart image changed however mine did not. They are also using the same template as mine. Any help would be greatly appreciated! website: www.palmettehome.com reference code: .icon--cart { svg { display:none; } background-image: url(IMAGE HERE); background-size: 20px 20px; background-repeat: no-repeat; }
  8. Site URL: https://www.thierrybamas.fr/shop/le-cheesecake-mangue-yuzu Hi, I'm looking to align 2 icons + le text in the excerpt from the product detail page like this picture. Here's the CSS .fas {float: left ;}.fas { color: #ff6a02 } ----- script----- <p style="text-align:center"> <i class="fas fa-truck"></i> <body> <p style="color:#ff6b0a";> &ensp;Livrable</p> </body> </p> <p style="text-align:center"> <i class="fas fa-shopping-bag"></i> <body> <p style="color:#ff6b0a";>&ensp;Non livrable</p> </body> </p>
  9. Site URL: https://recorder-pepper-3j33.squarespace.com/ Hi everyone! I was wondering if someone could help me... On the desktop version of my site I have been able to include a custom social icon linking to 'Spotlight'. This is great however, when in the mobile menu (screenshot attached) the link still shows the generic link icon. I'd love to know how I can change this to my custom icon please! Password to site is: romy Thank you!
  10. Site URL: http://www.2ndd.ltd Hey, I have a bar of social links w/ icons on my squarespace site. By default, Squarespace doesn't recognize my Discord.gg link, so it uses the default "chain" social media icon for that link. How do I add the Discord icon myself? I have it as both svg and png, would prefer svg, but I'll take anything right now, really. Thanks!
  11. Site URL: https://www.bspokellc.com/ My burger icon is white across the board (which is what I want) but I have a header code that changes all inside page headers to black. This seems to also be changing the burger icon to black on those pages on the mobile view. I am also losing my button text color which actually changes to white? Not really sure how to fix this. It is correct on some mobile pages but not others. First two images are correct, but when I navigate to the 'sign up' page it changes to black and you can't see it, then when I click the burger/toggle just by clicking on the black header (top right) it goes back to white over the green, but my button text is missing. Any help is appreciated thank you!
  12. Site URL: https://www.formeonline.co.uk/ Hi all, I'd love to allow customer accounts but when I do the first menu option in navigation is "sign in" and I can't move or edit it or even just hide it. Thanks in advance Clare
  13. Hello, I am building a very simple site for a restaurant. The navigation is made-up of simple text links fixed at the top of the site. I would like to be able to keep those nav links visible in mobile as well, instead of the hamburger menu. What code would do the trick? Thanks in advance.
  14. Site URL: https://bat-dahlia-6hpc.squarespace.com/config/ Hello, I am looking to have a icon in my header for customer login instead of having the word login? Is this possible on Squarespace? I would also like the icon to show next to the cart button in my mobile header. Can anyone help me with this?
  15. Site URL: https://bat-dahlia-6hpc.squarespace.com/config/pages Hello, I would like to show a login icon in my mobile header next to my cart icon. I have attached an item of a similar icon that I am after. When the icon is clicked I would like the customer to be taken to the register or login page. Is this possible?
  16. Site URL: https://www.deprio.com/home Hi! I replaced the customer "account" login text link in the header with a font awesome icon. I want to see if there is a code that can make this icon clickable to go to another page on my site. I'm using 7.1, thanks! Here is the code I used in the code injection to create the icon: <script> $(".user-accounts-link").append("<i class='fa fa-user-o' aria-hidden='true'></i>"); </script> And the CSS I used: .user-accounts-text-link{ display:none!important; }
  17. Site URL: https://ryanschmidt.design/ Hi guys, In my footer, on the right-hand side, I have a LinkedIn icon. I would like to add a label centered beneath it that says, "LinkedIn". I have searched and tried to figure the CSS out on my own, but am at a loss. Any help and guidance is greatly appreciated. Thank you!
  18. Site URL: https://ahii.squarespace.com/ Hi everyone, I'm stuck trying to solve this issue. My client asked for the navigation to be a hamburger at all times AND to add a phone icon button right next to it. I've managed to do the hamburger and to add a button next to it but I can't convert it into an icon. Can someone please help me? I'm already past my deadline! Christophe Bourlon
  19. I have this portion of the page that looks amazing on desktop, but once i view the mobile version, it's messed up. desktop version: mobile version: i use code block for the icons (icons from Font Awesome) while and text for the text. an example of my font code is : <i class="fas fa-street-view fa-4x"></i> im trying to change and make my icon and text inline, so that for mobile version an icon + text will be on 1 line. i am new to coding and thus i try: <i class="fas fa-street-view fa-4x"></i><h3>18years old and above</h3> but the icon and text are on different lines... how can i code it so that it will look like this on mobile too? align to left but the icon and text should align horizontally too..
  20. Site URL: http://www.arch-worldwie.com/shop-all Hello, Is there a way to make the basket/cart icon on the top right bolder?
  21. Site URL: http://loveandacupuncture.ca Looking to swap the "link" icon in the social links in header and footer for a "phone" icon, as this link is for a phone number. I think this is where it is. perhaps there is a "phone-icon" i could use in the place of "url-icon"? <a class="icon icon--fill" href="tel:250-703-3772" target="_blank" aria-label="URL"> <svg viewBox="23 23 64 64"> <use xlink:href="#url-icon" width="110" height="110"></use> </svg> </a> <svg viewBox="23 23 64 64"> <use xlink:href="#url-icon" width="110" height="110"></use> </svg> password for site is "love"
  22. Site URL: https://andrea.co Hi there, I have a question. How do I change the hover color of my search icon? I've tried with this, but it doesn't work .Header-search-form a:hover { fill: #0a97a9 !important; stroke: #0a97a9 !important; color: #0a97a9 !important; } Thanks Andrea
  23. I was wondering how to change (or if I can change) the shopping cart icon on this website using SquareSpace v7.1 to something that looks better. I can't seem to find anything to show a way to change this to more what it looks like in v7.0.
  24. Site URL: https://www.drivenfilms.tv/ Hello, is it possible to switch the word "Cart" to an actual shopping cart icon? Polaris family.
  25. Site URL: https://www.thislandisdigital.com/test-rectangles I've asked a less clear version of this question and wanted to try again with more clarity. The ideal solution would be flexible enough to be reapplied to achieve various similar arrangements. The immediate solution would strictly allow for the one requested arrangement. I am not amazing at CSS, so feel free to over-explain if you'd like. By default the Avenue template's indexes display a set of pages with identically proportioned thumbnails. In site styles, I can change the image ratio and every thumbnail will always occupy a single grid space. My current design uses square thumbnails (ratio 100, or 1:1) arranged in rows of 4 or, on mobile, rows of 2. In other words, I've created a perfect grid of squares. This design is largely inspired by ArtStation which sets a familiar standard in my industry. What I want is for the first two thumbnails to occupy two spaces in the grid for a ratio of 2:1. Because the rows for both desktop (4) and mobile (2) are divisible by 2, there is space for this in concept. Below are images of what I have and what I need. <<< Permission to stop reading here if you've already got an idea. Check images for reference. ⏰ So far I've been able to selectively target individual images and their backgrounds which I used to apply hover effects. I tried various methods of resizing images but often struggled with automatic vertical scaling (I'm looking for double wide with no change to height). Other attempts only scaled or skewed the image, leaving some part of the overall "thumbnail" structure at its original size. I don't know enough CSS to be able to understand that structure just yet. Below is the code I use to identify and affect particular thumbnails (modifying the "n" to a specific index). It's also how I'll assign rectangular hover images to the double-wide images. a.project:nth-child(n):hover { img { // On hovering over a specific block, affect the image at that selection. opacity: 20%; filter: blur(2px); transition: all 0.5s; } .content-fill { // On hovering over a specific block, affect the filled color at that selection. background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e852b782dc9304ac485f646/1585785720583/Thumbnails_HoverImage-Square_01.png); background-size: cover; //or: 100%; background-position: center center; background-repeat: no-repeat; } } I then tried to assign a {display: grid;} with grid-template-areas to an upper element on an index page. With this I successfully arranged the thumbnails as desired BUT had no control over vertical scaling. The double-wide thumbnails ended up appearing double-tall as well. My assumption here is that the width of the thumbnails was directly tied to the browser window (up to the maximum width), while the height had no obvious point of reference. Both my 1:1 thumbs and my 2:1 thumbs had a height of 512px, yet the height of each row was not identical. Instead, the images were locked to a 1:1 ratio, so if an image was assigned a width of two grid tiles, their height (while still one grid space tall) was doubled as well. I was able to rescale the image itself, but apparently not the entire container which stayed the same. I may have even been able to scale the grid space of each image at one point, but the clickable square and backgrounds and such were overlapping and jammed behind one another. Just lots and lots of weirdness. Below is some code for my attempts and a link to a page to test it. // Name the generic children of the layout in whatever order they appear. #collection-5c89d82aee6eb05083075575 #projectThumbs>div { a:nth-of-type(n){width: 100%;} a:nth-of-type(1){grid-area: one;} a:nth-of-type(2){grid-area: two;} a:nth-of-type(3){grid-area: three;} a:nth-of-type(4){grid-area: four;} a:nth-of-type(5){grid-area: five;} a:nth-of-type(6){grid-area: six;} a:nth-of-type(7){grid-area: seven;} a:nth-of-type(8){grid-area: eight;} a:nth-of-type(9){grid-area: nine;} a:nth-of-type(10){grid-area: ten;} a:nth-of-type(11){grid-area: eleven;} a:nth-of-type(12){grid-area: twelve;} a:nth-of-type(13){grid-area: thirteen;} a:nth-of-type(14){grid-area: fourteen;} a:nth-of-type(15){grid-area: fifteen;} a:nth-of-type(16){grid-area: sixteen;} } // Assign a grid display to the wrapper beneath #projectThumbs. #collection-5e83973d00d63d75669cbd19 #projectThumbs>div { display: grid; // Display the wrapper element as a grid. grid-template-areas: // CENTER ISLANDS "one one two two" // Two big "three four five six" // Four small "seven eight eight nine" //Small big small "ten eleven twelve thirteen" //Four small "fourteen fifteen fifteen sixteen"; // Small big small } // Customize the larger thumbnails. // At this point I was hopelessly lost, so this code is mostly to help isolate the specific indices needing double widths. #collection-5e83973d00d63d75669cbd19 #projectThumbs { a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img { height: 50% !important; width: 100% !important; left: 0 !important; right: 0 !important; } a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){ height: 50% !important; width: 100% !important; } }
×
×
  • Create New...