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

Found 14 results

  1. 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
  2. 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!
  3. Site URL: http://www.advancelane.com/grabfood-employment 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..
  4. 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?
  5. 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"
  6. 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
  7. 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.
  8. Site URL: https://www.drivenfilms.tv/ Hello, is it possible to switch the word "Cart" to an actual shopping cart icon? Polaris family.
  9. 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; } }
  10. Site URL: https://sixmileshigh.com/israel Hi all, I'm using Nolan template in 7.1 which I love. Some of my pages end up being black and some white at the top. I wondered if there was custom code that would flip my logo to a white version when the page is black and a black version when the page is white etc. Realise I'm asking for the moon but if you don't ask… Any thoughts welcome, Thanks, Mark
  11. Site URL: https://stingray-cylinder-zztm.squarespace.com/ Hey! In many locations on our website using the BRINE template, we use images blocks to display icons. They look fine when viewing the website on a PC, but on mobile the icons looks HUGE. One example is the orange play button at the top of our home page. Can this be fixed with code by restricted the maximum size of these images? https://stingray-cylinder-zztm.squarespace.com Pass: temp123 Kind regards!
  12. 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
  13. Rally template. I removed the social media icon-only block from the footer. I would like to restore/add the 'icon block', however I can't find the selection or procedure anywhere. • I do have my Instagram account active in 'Connected Account' with 'pull' disabled. (I've removed and replaced the URL multiple times.) • I'm just looking to restore/add icons only to the footer (and not add a social media block pulling from my Instagram page which seems to be the only option I can find). Thanks in advance. I've been searching for hours.
  14. I have a page full of images that take a while to load. Currently, there's just a blank space in their footprint while they load. I'd like to instead insert a small custom loading icon gif to play for each image while it loads. Is this possible with CSS/HTML in Squarespace? Thanks for any help! The page I'm working on is http://dillonbaker.com/#/spotlight/
×
×
  • Create New...