To add a LinkedIn icon after Button text in Squarespace, you can use these options.
A. Use Code Injection
#1. First, use this tool to find ID of Button Block
In my example, we will have:
- #block-yui_3_17_2_1_1721686729263_46175
#2. Use this code to Code Injection Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>').appendTo('#block-yui_3_17_2_1_1721686729263_46175 a');
});
</script>
<style>
#block-yui_3_17_2_1_1721686729263_46175 svg {
width: 20px;
fill: white;
margin-left: 10px;
}
#block-yui_3_17_2_1_1721686729263_46175 a {
display: flex;
align-items: center;
}
</style>
Result:
B. Use CSS code
#1. Same as above #1.
#2. Use this code to Custom CSS box
div#block-yui_3_17_2_1_1721686729263_46175 a:after {
content: "";
background-image: url(https://content.invisioncic.com/p289038/monthly_2024_07/Frame148.png.8f8cb6008ea84684b25bd65101ee7fbe.png);
background-size: contain;
display: inline-block;
width: 20px;
height: 20px;
margin-left: 10px;
}
div#block-yui_3_17_2_1_1721686729263_46175 a {
display: flex;
align-items: center;
}