Icons
An Icon is is a quickly comprehensible symbol used alongside text. Icons can be used as part of links or buttons.
An Icon is is a quickly comprehensible symbol used alongside text. Icons can be used as part of links or buttons.
Use the tabs to view the icons source code.
<ul class="social-media">
<li class="social-media__item">
<a href="https://twitter.com/cathy_dutton" class="anchor social-media__anchor" target="_blank" rel="noopener">
<span>Follow me on Twitter</span>
<svg version="1.1" width="100" height="100" role="img" viewBox="0 0 512 512" aria-labelledby="twitterTitleFooter twitterDescFooter">
<title id="twitterTitleFooter">twitter</title>
<desc id="twitterDescFooter">link to twitter profile</desc>
<path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
</svg>
</a>
</li>
<li class="social-media__item">
<a href="https://github.com/cathydutton" class="anchor social-media__anchor" target="_blank" rel="noopener">
<span>View my Github profile</span>
<svg version="1.1" width="100" height="100" role="img" viewBox="0 0 512 512" aria-labelledby="githubTitleFooter githubDescFooter">
<title id="githubTitleFooter">github</title>
<desc id="githubDescFooter">link to github profile</desc>
<path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"/>
</svg>
</a>
</li>
<li class="social-media__item">
<a href="https://codepen.io/cathydutton/pens/popular/" class="anchor social-media__anchor" target="_blank" rel="noopener">
<span>View my Codepen profile</span>
<svg version="1.1" width="100" height="100" role="img" viewBox="0 0 512 512" aria-labelledby="codepenTitleFooter codepenDescFooter">
<title id="codepenTitleFooter">codepen</title>
<desc id="codepenDescFooter">link to codepen profile</desc>
<path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/>
</svg>
</a>
</li>
</ul>
/*
Social media icons
----------------------------------- */
:root {
--colour-social-colour: var(--colour-black);
--colour-social-stroke: var(--colour-pink);
--colour-social-hover: var(--colour-black);
}
.footer {
--colour-social-colour: var(--colour-pink-light);
--colour-social-stroke: var(--colour-black);
--colour-social-hover: var(--colour-pink-light);
}
.social-media {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1rem;
}
.social-media__item {
list-style: none;
margin-bottom: .5rem;
}
.social-media__anchor {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.social-media__anchor[target=_blank]:after {
content: '';
}
.social-media__anchor svg {
width: 40px;
height: 40px;
margin: 0 7px;
color: var(--colour-social-colour);
fill: var(--colour-social-colour);
}
.social-media__anchor:hover svg,
.social-media__anchor:focus svg {
transition: all .3s ease-in-out;
border-radius: 100%;
color: var(--colour-social-stroke);
fill: var(--colour-social-stroke);
background: var(--colour-social-colour);
outline: none;
transform: scale(1.1);
}
.social-media__anchor:hover,
.social-media__anchor:active,
.social-media__anchor:focus,
.social-media__anchor:visited {
outline: dashed 1px var(--colour-social-hover);
text-decoration: none;
}