01 Oct Adding The Twitter X Logo to Squarespace
With the recent change to the Twitter X logo it is now time to transition your Squarespace site to incorporate the new “X” icon. As with Tiktok, Squarespace will eventually update their platform to include the new logo but here are two methods for updating your Squarespace site for the change. These two methods can also be used to incorporate custom icons for your site or add non supported icons for any link you wish.
Method 1 – Changing the Header in Squarespace to Display the New Twitter X Logo
Again, this method can be used for incorporating any custom design you wish into the Social Links section on your header or block throughout the site.
Step 1 – Obtaining the New Twitter X Icon
There are several ways to obtain the new icon. If you want the simple black or white version, you can download it directly from Twitter here. However, if you are looking to customize your new icon with the color of your Squarespace site, you need an SVG file. The easiest way to obtain one is through the Font Awesome database here. You can either change the color on their page before downloading it or download as is and import the X icon to Canva to replace the color with one from your brand kit. We have found the second method to be the best, as you can control the size of your icon as well as add any custom backgrounds you would like to add. We recommend exporting the file as a 100px X 100 px PNG for best sizing.
Step 2 – Adding the Twitter X Icon to Squarespace
While there are several ways to import new icons to a website, this is a quick and easy way that we recommend to those who are uncomfortable with coding or adding unnecessary extra code to their Squarespace site. For this method, we will be navigating to the Custom CSS section under Websites in the Squarespace dashboard.
For this, log in to your Squarespace dashboard then select “Website”. Scroll down to the Utilities section and select “Website Tools”. Here you will find the Custom CSS section. Click it for the following screen to appear.
From here we will be adding our new Twitter icon to the site. For this, we need to click “Custom Files” and add our icon to the box that says “Add images or fonts”.
Step 3 – Adding the Code for the Custom Icons to Squarespace
Don’t worry! This does not require any coding knowledge and is very easy to do. We will simply be pasting the following code into the box below the “Custom Files”.
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(1) {
svg {
display:none;
}
background-image: url(INSERTTWITTERXICONHERE);
background-size: 100%;
background-repeat: no-repeat;
}
}
.header-menu-actions-action:nth-of-type(1) {
svg {
display:none;
}
background-image: url(INSERTTWITTERXICONHERE);
background-size: 100%;
background-repeat: no-repeat;
}
From here, we will need to add our Twitter X Icon link from Step 2 to the code where it says INSERTTWITTERXICONHERE. Note: there are two different places that you need to paste into, one is for your desktop site and the other is for mobile. To paste your link, place your cursor inside the parentheses () and erase the text that is there. If this is the only file you have placed on the backend of Squarespace, the link should automatically be inserted into the code. However, if you have multiple files on the backend, you will need to select the correct file from the dropdown that appears to insert your link. Repeat this process for the secondary mobile section.
Additionally, you may need to adjust which position you want your new icon to appear in the header menu. This can be done by either manipulating the .header-menu-actions-action:nth-of-type(1) of the code to show the correct icon position or by moving your Social Links on the front end of the builder to correlate with the new position of the icon.
Example: If your old Twitter link was in the 3rd position of the Social Links on your header, you will need to replace the (1) inside the .header-menu-actions-action:nth-of-type(1) with a (3) so that the new icon is in the correct place and still leading to your Twitter link for both instances within the code. Conversely, if you would rather move the Twitter link in your Social Links section to the 1st position, this will also work.
Tips
By using the Canva square method, you should not need to adjust the width and height of your icons, however, if need be you can adjust the width and height to display the icon correctly by adjusting the background-size and replacing the 100% with the appropriate width and height such as background-size: 15px 20px;
Different Colored Icons for Desktop & Mobile
If you have two different colors for your desktop and mobile icons, simply repeat steps 1-3 but swap out the color for the secondary mobile icon, upload the 2nd PNG into the “Custom Files” & add that link to the 2nd block that says INSERTTWITTERXICONHERE. You will then see the other colored icon on your mobile menu.
Method 2 – Adding a Custom Twitter X Button To Your Squarespace Site
This method involves adding a custom button to the site and would work on any type of website as long as you can add a custom HTML block. In our example, instead of using a Social Icons block, we will instead insert a Custom HTML block into our Squarespace site and replace the Facebook, Twitter, Instagram, & TikTok so that they all match. Note: this method does not work in the Header section of the Squarespace site, as you cannot add a Custom HTML block here.
Step 1 – Obtaining the Code for Your Twitter X Logo Button
For this, we will be using a site called Nifty Buttons to write our code for us. For our example, we will be selecting the Facebook, Instagram, TikTok, & new Twitter X Logo for our buttons. Follow the instructions on that page for customization options. Note: the four logos that we have selected are free to obtain, but there are several from the list that you will have to pay for to have access to. Simply hit the “$0” & “Get Your Buttons” to get your code. We have a basic version of this below for you to copy as well. If you have some coding knowledge you can manipulate this code to include the color, size, & links of your choice. If you do want to use the below code, replace the <a href= with your own social links.
<div style="display: flex; flex-wrap:wrap; align-items: center; justify-content: center;"><a href="https://www.facebook.com/EmbarkMarketing" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:36px;height:36px;padding:2px;margin:5px;color:#fff;border-radius:15%;background-color:#000000;"><svg class="niftybutton-facebook" style="display:block;fill:currentColor" data-tag="fac" data-name="Facebook" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet"><title>Facebook social icon</title>
<path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
</svg></a><a href="https://www.tiktok.com/@embarkmarketing" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:36px;height:36px;padding:2px;margin:5px;color:#fff;border-radius:15%;background-color:#000000;"><svg class="niftybutton-tiktok" style="display:block;fill:currentColor" data-tag="tic" data-name="TikTok" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet"><title>TikTok social icon</title>
<path d="M 386.160156 141.550781 C 383.457031 140.15625 380.832031 138.625 378.285156 136.964844 C 370.878906 132.070312 364.085938 126.300781 358.058594 119.785156 C 342.976562 102.523438 337.339844 85.015625 335.265625 72.757812 L 335.351562 72.757812 C 333.617188 62.582031 334.332031 56 334.441406 56 L 265.742188 56 L 265.742188 321.648438 C 265.742188 325.214844 265.742188 328.742188 265.589844 332.226562 C 265.589844 332.660156 265.550781 333.058594 265.523438 333.523438 C 265.523438 333.714844 265.523438 333.917969 265.484375 334.117188 C 265.484375 334.167969 265.484375 334.214844 265.484375 334.265625 C 264.011719 353.621094 253.011719 370.976562 236.132812 380.566406 C 227.472656 385.496094 217.675781 388.078125 207.707031 388.066406 C 175.699219 388.066406 149.757812 361.964844 149.757812 329.734375 C 149.757812 297.5 175.699219 271.398438 207.707031 271.398438 C 213.765625 271.394531 219.789062 272.347656 225.550781 274.226562 L 225.632812 204.273438 C 190.277344 199.707031 154.621094 210.136719 127.300781 233.042969 C 115.457031 243.328125 105.503906 255.605469 97.882812 269.316406 C 94.984375 274.316406 84.042969 294.410156 82.714844 327.015625 C 81.882812 345.523438 87.441406 364.699219 90.089844 372.625 L 90.089844 372.792969 C 91.757812 377.457031 98.214844 393.382812 108.742188 406.808594 C 117.230469 417.578125 127.253906 427.035156 138.5 434.882812 L 138.5 434.714844 L 138.667969 434.882812 C 171.925781 457.484375 208.800781 456 208.800781 456 C 215.183594 455.742188 236.566406 456 260.851562 444.492188 C 287.785156 431.734375 303.117188 412.726562 303.117188 412.726562 C 312.914062 401.367188 320.703125 388.425781 326.148438 374.449219 C 332.367188 358.109375 334.441406 338.507812 334.441406 330.675781 L 334.441406 189.742188 C 335.273438 190.242188 346.375 197.582031 346.375 197.582031 C 346.375 197.582031 362.367188 207.832031 387.316406 214.507812 C 405.214844 219.257812 429.332031 220.257812 429.332031 220.257812 L 429.332031 152.058594 C 420.882812 152.976562 403.726562 150.308594 386.160156 141.550781 Z M 386.160156 141.550781"></path>
</svg></a><a href="https://twitter.com/EmbarkMarketing" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:36px;height:36px;padding:2px;margin:5px;color:#fff;border-radius:15%;background-color:#000000;"><svg class="niftybutton-twitterx" style="display:block;fill:currentColor" data-tag="twix" data-name="TwitterX" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet"><title>Twitter X social icon</title>
<path d="M 304.757 216.824 L 495.394 0 L 450.238 0 L 284.636 188.227 L 152.475 0 L 0 0 L 199.902 284.656 L 0 512 L 45.16 512 L 219.923 313.186 L 359.525 512 L 512 512 M 61.456 33.322 L 130.835 33.322 L 450.203 480.317 L 380.811 480.317 "></path>
</svg></a><a href="https://www.instagram.com/embarkmarketing/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:36px;height:36px;padding:2px;margin:5px;color:#fff;border-radius:15%;background-color:#000000;"><svg class="niftybutton-instagram" style="display:block;fill:currentColor" data-tag="ins" data-name="Instagram" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet"><title>Instagram social icon</title>
<path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
<path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
<circle cx="351.5" cy="160.5" r="21.5"></circle>
</svg></a></div>Just Want the Twitter X Icon? Use This.
If you are only using the Twitter X icon, simply copy and paste this section instead of the whole block from above.
<div style="display: flex; flex-wrap:wrap; align-items: center; justify-content: center;"><a href="https://twitter.com/EmbarkMarketing" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:36px;height:36px;padding:2px;margin:5px;color:#fff;border-radius:15%;background-color:#000000;"><svg class="niftybutton-twitterx" style="display:block;fill:currentColor" data-tag="twix" data-name="TwitterX" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet"><title>Twitter X social icon</title>
<path d="M 304.757 216.824 L 495.394 0 L 450.238 0 L 284.636 188.227 L 152.475 0 L 0 0 L 199.902 284.656 L 0 512 L 45.16 512 L 219.923 313.186 L 359.525 512 L 512 512 M 61.456 33.322 L 130.835 33.322 L 450.203 480.317 L 380.811 480.317 "></path>
</svg></a></div>Step 2 – Adding the Twitter X Logo to Your Custom HTML Block
In our example, we are using the custom icons in our footer instead of the Social Icons block. For this, go to the section you wish to insert the code into on Squarespace. Select “Add Block” and then “Code” from the list of available options. From here, select the pencil edit icon in the top left corner & then paste the above code from Step 1 into the block. Click off the block and you should see your new button displayed. You can then manipulate the block as you would any other on Squarespace.
Other Methods
As previously stated, there are several ways to add custom buttons, & icon links to your Squarespace site. These are two methods that took the least amount of time and code manipulation to be effective across all of our current Squarespace clients. We hope that this tutorial was helpful and check back to our blog for more tips and tricks for websites as well as insights into how to market your business in the digital era. Interested in having a website built? Contact us today for our packages and pricing.