scss SVG社交图标
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss SVG社交图标相关的知识,希望对你有一定的参考价值。
<a class="socialCTA">
<svg title="Twitter" class="icon icon--twitter">
<use xlink:href="assets/dist/img/icons.svg#logo-twitter"/>
</svg>
</a>
<a class="socialCTA">
<svg title="Facebook" class="icon icon--facebook">
<use xlink:href="assets/dist/img/icons.svg#logo-facebook"/>
</svg>
</a>
<a class="socialCTA">
<svg title="Instagram" class="icon icon--instagram">
<use xlink:href="assets/dist/img/icons.svg#logo-instagram"/>
</svg>
</a>
<a class="socialCTA">
<svg title="Youtube" class="icon icon--youtube">
<use xlink:href="assets/dist/img/icons.svg#logo-youtube"/>
</svg>
</a>
<a class="socialCTA">
<svg title="Pinterest" class="icon icon--pinterest">
<use xlink:href="assets/dist/img/icons.svg#logo-pinterest"/>
</svg>
</a>
<a class="socialCTA">
<svg title="Whatsapp" class="icon icon--whatsapp">
<use xlink:href="assets/dist/img/icons.svg#logo-whatsapp"/>
</svg>
</a>
<a class="socialCTA">
<svg title="Email" class="icon icon--email">
<use xlink:href="assets/dist/img/icons.svg#email"/>
</svg>
</a>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="award" viewBox="0 0 90 69"><path d="M13.777 10.333C13.313 3.705 17.929 2.158 21.934 0c-.281 5.157-2.438 10.009-8.157 10.333m62.723 0C76.941 3.668 72.334 2.051 68.161 0c.781 5.443 2.518 9.93 8.339 10.333m-66.349 5.076c3.971-2.428 2.808-10.162 0-13.052-2.109 2.999-3.949 10.632 0 13.052m70.156 0c3.579-2.655 2.163-10.537-.544-13.052-2.198 3.42-3.795 10.816.544 13.052M20.303 9.427c-4.421 1.682-9.104 3.102-9.064 9.245 6.249.266 8.281-4.65 9.064-9.245m58.735 9.245c.018-6.182-4.672-7.655-9.245-9.245 1.29 4.873 2.911 9.415 9.245 9.245M7.614 25.017c3.314-3.999.442-10.424-2.72-12.69-1.567 4.428-1.649 11.324 2.72 12.69m75.05 0c4.263-1.252 4.619-8.899 2.356-12.69-2.665 2.662-5.737 8.708-2.356 12.69M15.409 18.49c-3.586 2.271-7.942 5.313-6.527 11.421 5.081-.781 6.98-5.71 6.527-11.421m65.986 11.421c1.376-6.15-2.917-9.28-6.708-11.421.007 6.037 1.565 10.521 6.708 11.421M7.976 34.262c1.524-6.267-2.983-9.237-6.889-11.239.178 5.864 1.871 10.214 6.889 11.239m74.325 0c4.994-.867 6.932-5.757 6.708-11.239-3.715 2.106-8.279 5.024-6.708 11.239m-67.436-7.251c-2.651 2.638-6.436 7.418-3.807 12.508 4.559-.881 5.789-7.813 3.807-12.508m60.366 0c-1.627 5.036-.614 11.547 3.988 12.508 2.584-5.119-1.1-10.037-3.988-12.508m-64.898 14.14C9.961 35.48 5.372 34.026 0 33.356c1.756 4.171 4.174 8.628 10.333 7.795m69.612 0c4.39.857 6.869-1.799 8.52-4.17.811-1.166 1.838-2.602 1.45-3.625-5.116.805-9.654 2.189-9.97 7.795m-63.267-5.257c-2.448 2.82-5.535 8.705-2.357 12.871 4.42-1.068 4.699-9.142 2.357-12.871m59.278 12.871c3.126-4.179.175-10.257-2.538-12.871-2.006 4.049-1.906 11.724 2.538 12.871m-55.472 5.619c4.687-1.987 2.637-10.177.182-13.052-2.113 3.146-3.752 10.255-.182 13.052m49.127 0c3.842-2.502 2.204-10.198-.181-13.052-2.148 3.153-4.282 10.81.181 13.052m-56.922-6.345c-.662-5.078-5.47-6.977-11.239-6.344 2.301 3.387 5.186 7.891 11.239 6.344m64.899 0c6.077 1.517 9.055-2.965 11.239-6.526-6.078-.156-10.476 1.368-11.239 6.526M29.367 58.916c2.692-5.164-1.162-10.18-4.351-12.327-1.131 5.449-.059 11.272 4.351 12.327M65.08 46.589c-2.955 2.313-6.906 7.188-4.17 12.327 4.392-.916 5.672-7.258 4.17-12.327m-46.59 7.433c-1.075-4.415-6.895-5.77-12.146-4.351 1.649 2.932 7.118 7.041 12.146 4.351m53.297 0c3.56 1.975 6.759.464 9.064-1.269 1.197-.9 3.07-2.054 2.901-3.082-5.163-1.446-10.922 0-11.965 4.351m-30.818 7.432c-.137-5.906-4.629-7.456-9.789-8.339 1.548 4.376 3.863 8.944 9.789 8.339m14.865-2.538c1.401-1.538 3.125-3.736 2.901-5.801-4.947 1.036-9.417 2.548-9.427 8.52 3.099.291 5.009-1.054 6.526-2.719m-30.274 0c-1.664-4.478-8.989-4.256-12.871-1.813 2.625 2.501 9.185 5.177 12.871 1.813m39.157 0c3.691 3.318 10.453.77 12.871-1.994-4.176-2.138-11.137-2.502-12.871 1.994m-31.18 2.719c-.104-.661-3.146-1.94-4.533-1.994-3.765-.147-6.39 2.604-8.338 3.989 2.339.747 6.199 2.146 9.245 1.087.883-.307 3.773-2.144 3.626-3.082m27.554-1.994c-.88.054-4.296 1.202-4.351 2.176-.031.566 2.072 2.004 2.357 2.175 3.056 1.829 8.052.889 10.514-.544-2.088-1.264-4.788-4.033-8.52-3.807m-31.542 7.614c4.443 1.859 11.423 1.269 12.689-3.082-4.512-3.077-10.331.166-12.689 3.082m18.49-3.082c1.192 4.337 8.544 5.087 12.69 2.901-2.55-2.665-8.202-6.012-12.69-2.901m-2.99-3.59a2.114 2.114 0 1 0-.001 4.229 2.114 2.114 0 0 0 .001-4.229" fill-rule="evenodd"/></symbol><symbol id="email" viewBox="0 0 32 32"><title>Mail</title><path class="path1" d="M31.5.196q.589.429.482 1.143l-4.571 27.429q-.089.518-.571.804-.25.143-.554.143-.196 0-.429-.089l-8.089-3.304-4.321 5.268q-.321.411-.875.411-.232 0-.393-.071-.339-.125-.545-.42t-.205-.652v-6.232L26.858 5.715 7.769 22.233.715 19.34q-.661-.25-.714-.982-.036-.714.571-1.054L30.286.161Q30.554 0 30.857 0q.357 0 .643.196z" fill="currentColor"/></symbol><symbol id="logo-facebook" viewBox="0 0 256 256"><title>Facebook</title><path d="M241.871 256.001c7.802 0 14.129-6.326 14.129-14.129V14.129C256 6.325 249.673 0 241.871 0H14.129C6.324 0 0 6.325 0 14.129v227.743c0 7.803 6.324 14.129 14.129 14.129h227.742zm-65.236 0v-99.137h33.277l4.982-38.635h-38.259V93.561c0-11.186 3.107-18.809 19.148-18.809l20.459-.009V40.188c-3.54-.471-15.684-1.523-29.812-1.523-29.498 0-49.692 18.005-49.692 51.071v28.493h-33.362v38.635h33.362v99.137h39.897z" fill="currentColor" fill-rule="evenodd"/></symbol><symbol id="logo-instagram" viewBox="0 0 256 256"><path d="M128 23.064c34.177 0 38.225.13 51.722.745 12.48.57 19.258 2.655 23.769 4.408 5.974 2.322 10.238 5.096 14.717 9.575 4.48 4.479 7.253 8.743 9.575 14.717 1.753 4.511 3.838 11.289 4.408 23.768.615 13.498.745 17.546.745 51.723 0 34.178-.13 38.226-.745 51.723-.57 12.48-2.655 19.257-4.408 23.768-2.322 5.974-5.096 10.239-9.575 14.718-4.479 4.479-8.743 7.253-14.717 9.574-4.511 1.753-11.289 3.839-23.769 4.408-13.495.616-17.543.746-51.722.746-34.18 0-38.228-.13-51.723-.746-12.48-.57-19.257-2.655-23.768-4.408-5.974-2.321-10.239-5.095-14.718-9.574-4.479-4.48-7.253-8.744-9.574-14.718-1.753-4.51-3.839-11.288-4.408-23.768-.616-13.497-.746-17.545-.746-51.723 0-34.177.13-38.225.746-51.722.57-12.48 2.655-19.258 4.408-23.769 2.321-5.974 5.095-10.238 9.574-14.717 4.48-4.48 8.744-7.253 14.718-9.575 4.51-1.753 11.288-3.838 23.768-4.408 13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155 3.555 52.297 1.392 61.602.77 75.226.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774.622 13.625 2.785 22.93 5.95 31.071 3.27 8.417 7.647 15.556 14.763 22.672 7.116 7.116 14.254 11.492 22.672 14.763 8.142 3.165 17.446 5.328 31.07 5.95 13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95 8.418-3.27 15.556-7.647 22.672-14.763 7.116-7.116 11.493-14.254 14.764-22.672 3.164-8.142 5.328-17.446 5.95-31.07.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0zm0 62.27c-36.302 0-65.73 29.43-65.73 65.73 0 36.302 29.428 65.73 65.73 65.73 36.301 0 65.73-29.428 65.73-65.73 0-36.301-29.429-65.73-65.73-65.73zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667-19.103 42.667-42.667 42.667zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36-8.483 0-15.36-6.876-15.36-15.36 0-8.483 6.877-15.36 15.36-15.36 8.484 0 15.36 6.877 15.36 15.36z" fill="currentColor"/></symbol><symbol id="logo-kickoff" viewBox="0 0 963 272"><title>Kickoff</title><path d="M115.384 214H167.8l-53.28-100.8 88.704-100.8H146.2l-81.792 92.736L80.824 12.4h-44.64L.76 214H45.4l17.568-99.936L115.384 214zm70.56 0h41.76l26.208-149.76h-41.76L185.944 214zm29.952-171.36h41.76L265.144.88h-41.76l-7.488 41.76zm142.56 115.2l-2.016 11.52c-1.152 5.76-4.32 8.64-10.08 8.64h-30.24c-5.76 0-8.352-2.88-7.2-8.64l10.656-60.48c.864-5.76 4.32-8.64 10.08-8.64h30.24c5.76 0 8.064 2.88 7.2 8.64l-2.016 11.52h41.76l2.016-10.944c4.608-27.072-10.368-45.216-37.44-45.216H330.52c-26.784 0-48.096 18.144-52.704 45.216l-10.656 59.328C262.552 195.856 277.528 214 304.312 214h40.896c27.072 0 48.384-18.144 52.992-45.216l2.016-10.944h-41.76zM510.52 214h50.976l-39.456-74.88 65.664-74.88h-50.976l-61.92 70.56L498.424.88h-41.76L419.224 214h41.76l12.384-70.272L510.52 214z" fill="currentColor"/><path d="M668.92 169.36c-1.152 5.76-4.32 8.64-10.08 8.64H628.6c-5.76 0-8.352-2.88-7.2-8.64l10.656-60.48c.864-5.76 4.32-8.64 10.08-8.64h30.24c5.76 0 8.064 2.88 7.2 8.64l-10.656 60.48zm52.416-59.904c4.608-27.072-10.368-45.216-37.44-45.216H643c-26.784 0-48.096 18.144-52.704 45.216l-10.656 59.328C575.032 195.856 590.008 214 616.792 214h40.896c27.072 0 48.384-18.144 52.992-45.216l10.656-59.328zM916.888 45.52c.864-5.76 4.32-8.64 10.08-8.64h28.8l6.336-36h-34.272c-26.784 0-48.096 18.144-52.992 45.216l-3.168 18.144h-54.72l3.456-18.72c.864-5.76 4.32-8.64 10.08-8.64h28.8l6.336-36h-34.272c-26.784 0-48.096 18.144-52.992 45.216l-3.168 18.144h-31.68l-6.336 36h31.68L738.904 271.6h41.76l29.952-171.36h54.72L835.384 271.6h41.76l29.952-171.36h37.44l6.336-36h-37.44l3.456-18.72z" fill="#FE7C08"/></symbol><symbol id="logo-pinterest" viewBox="0 0 256 256"><path d="M0 128.002c0 52.414 31.518 97.442 76.619 117.239-.36-8.938-.064-19.668 2.228-29.393 2.461-10.391 16.47-69.748 16.47-69.748s-4.089-8.173-4.089-20.252c0-18.969 10.994-33.136 24.686-33.136 11.643 0 17.268 8.745 17.268 19.217 0 11.704-7.465 29.211-11.304 45.426-3.207 13.578 6.808 24.653 20.203 24.653 24.252 0 40.586-31.149 40.586-68.055 0-28.054-18.895-49.052-53.262-49.052-38.828 0-63.017 28.956-63.017 61.3 0 11.152 3.288 19.016 8.438 25.106 2.368 2.797 2.697 3.922 1.84 7.134-.614 2.355-2.024 8.025-2.608 10.272-.852 3.242-3.479 4.401-6.409 3.204-17.884-7.301-26.213-26.886-26.213-48.902 0-36.361 30.666-79.961 91.482-79.961 48.87 0 81.035 35.364 81.035 73.325 0 50.213-27.916 87.726-69.066 87.726-13.819 0-26.818-7.47-31.271-15.955 0 0-7.431 29.492-9.005 35.187-2.714 9.869-8.026 19.733-12.883 27.421a127.897 127.897 0 0 0 36.277 5.249c70.684 0 127.996-57.309 127.996-128.005C256.001 57.309 198.689 0 128.005 0 57.314 0 0 57.309 0 128.002z" fill="currentColor"/></symbol><symbol id="logo-tmw" viewBox="0 0 410 44"><title>TMW Unlimited</title><path d="M86.145.787h7.493l7.612 32.217h.118L109.865.787h7.553l8.261 32.217h.118L133.644.787h7.494l-11.624 42.13h-7.494L113.582 10.7h-.117l-8.615 32.217h-7.612L86.145.787M.727.787h34.105V7.16H21.438v35.757h-7.376V7.16H.727V.787m38.274 0h10.385L61.01 33.772h.119L72.458.787h10.267v42.13h-7.022V10.406h-.118L63.902 42.917h-6.078L46.141 10.406h-.118v32.511h-7.022V.787M148.11.788h7.381V25.34c0 1.418.065 2.856.205 4.309.135 1.457.529 2.764 1.182 3.925.646 1.162 1.632 2.116 2.951 2.861 1.316.751 3.177 1.124 5.576 1.124 2.4 0 4.26-.373 5.577-1.124 1.32-.745 2.302-1.699 2.95-2.861.649-1.161 1.041-2.468 1.181-3.925a46.26 46.26 0 0 0 .207-4.309V.788h7.376v26.973c0 2.714-.411 5.074-1.239 7.08-.825 2.008-1.997 3.689-3.511 5.049-1.516 1.356-3.334 2.368-5.461 3.04-2.122.668-4.483 1.003-7.08 1.003-2.598 0-4.958-.335-7.084-1.003-2.123-.672-3.943-1.684-5.457-3.04-1.517-1.36-2.687-3.041-3.514-5.049-.824-2.006-1.24-4.366-1.24-7.08V.788m38.528 11.627h6.375v4.486l.117.119c1.023-1.693 2.363-3.019 4.014-3.985 1.654-.964 3.482-1.447 5.488-1.447 3.343 0 5.982.867 7.91 2.598 1.927 1.731 2.89 4.329 2.89 7.791V42.93h-6.727V23.748c-.079-2.4-.59-4.141-1.533-5.224-.945-1.08-2.421-1.623-4.429-1.623-1.139 0-2.164.205-3.068.62a6.63 6.63 0 0 0-2.301 1.712c-.63.73-1.119 1.584-1.477 2.567a9.203 9.203 0 0 0-.53 3.128V42.93h-6.729V12.415m30.861 30.515h6.726V.787h-6.726zm11.028 0h6.725V12.415h-6.725zm11.007-30.515h6.375v4.249h.176a17.996 17.996 0 0 1 1.652-2.066 9.119 9.119 0 0 1 1.979-1.594c.727-.43 1.564-.775 2.506-1.031.946-.256 2.026-.385 3.249-.385 1.846 0 3.569.412 5.162 1.241 1.594.828 2.725 2.103 3.396 3.835 1.14-1.573 2.456-2.812 3.952-3.717 1.495-.904 3.363-1.359 5.606-1.359 3.226 0 5.735.788 7.525 2.362 1.793 1.573 2.685 4.211 2.685 7.907V42.93h-6.726V25.104c0-1.219-.039-2.331-.118-3.335-.078-1.003-.305-1.868-.681-2.595a3.856 3.856 0 0 0-1.681-1.683c-.747-.392-1.772-.59-3.069-.59-2.283 0-3.933.709-4.957 2.125-1.023 1.415-1.533 3.421-1.533 6.021V42.93h-6.728V23.334c0-2.125-.385-3.727-1.153-4.81-.767-1.081-2.174-1.623-4.219-1.623-.868 0-1.704.177-2.509.531a6.208 6.208 0 0 0-2.123 1.535c-.612.668-1.103 1.495-1.477 2.479-.373.984-.56 2.105-.56 3.364v18.12h-6.729V12.415m57.199 0h5.076V3.266h6.729v9.149h6.08v5.017h-6.08v16.29c0 .708.029 1.32.09 1.828.058.514.195.946.412 1.299.215.355.54.621.974.8.43.175 1.023.265 1.771.265.472 0 .943-.009 1.415-.032a7.153 7.153 0 0 0 1.418-.204v5.192c-.748.08-1.478.159-2.186.238-.708.076-1.433.117-2.183.117-1.77 0-3.194-.17-4.276-.503-1.084-.333-1.929-.825-2.541-1.475-.61-.65-1.022-1.466-1.238-2.45-.218-.983-.347-2.104-.385-3.364V17.432h-5.076v-5.017m41.311 12.572a10.904 10.904 0 0 0-.68-3.071 8.228 8.228 0 0 0-1.531-2.566 7.672 7.672 0 0 0-2.362-1.771c-.926-.45-1.958-.678-3.099-.678-1.182 0-2.254.207-3.215.62a7.39 7.39 0 0 0-2.482 1.71 8.614 8.614 0 0 0-1.653 2.568 9.002 9.002 0 0 0-.678 3.188h15.7zm-15.7 4.427c0 1.182.167 2.322.503 3.424.333 1.1.835 2.065 1.503 2.889.669.829 1.515 1.488 2.539 1.978 1.022.491 2.244.739 3.659.739 1.967 0 3.55-.422 4.752-1.268 1.197-.848 2.095-2.116 2.683-3.806h6.375c-.353 1.65-.965 3.125-1.83 4.426a12.8 12.8 0 0 1-3.127 3.273 13.501 13.501 0 0 1-4.101 2.005c-1.516.452-3.1.682-4.752.682-2.401 0-4.525-.393-6.373-1.182-1.852-.788-3.415-1.887-4.693-3.304-1.28-1.416-2.243-3.106-2.893-5.076-.645-1.968-.972-4.132-.972-6.492 0-2.163.343-4.221 1.032-6.167.69-1.949 1.673-3.66 2.952-5.134a14.077 14.077 0 0 1 4.632-3.514c1.81-.865 3.858-1.299 6.139-1.299 2.398 0 4.553.504 6.463 1.507 1.908 1.003 3.491 2.332 4.751 3.983 1.258 1.654 2.173 3.55 2.745 5.696.569 2.146.717 4.357.441 6.64h-22.428zm31.283-1.419c0 1.298.166 2.58.504 3.837.333 1.259.846 2.381 1.536 3.366a7.744 7.744 0 0 0 2.622 2.36c1.062.589 2.321.888 3.776.888 1.497 0 2.785-.319 3.866-.949a7.945 7.945 0 0 0 2.657-2.477 11.214 11.214 0 0 0 1.534-3.45c.336-1.281.503-2.589.503-3.926 0-3.386-.759-6.022-2.273-7.909-1.515-1.89-3.571-2.834-6.166-2.834-1.576 0-2.904.324-3.985.974a8.177 8.177 0 0 0-2.655 2.538c-.69 1.042-1.182 2.221-1.477 3.54a18.473 18.473 0 0 0-.442 4.042m23.491 14.935h-6.376v-4.133h-.117c-.907 1.773-2.224 3.039-3.955 3.807a13.415 13.415 0 0 1-5.49 1.15c-2.4 0-4.496-.422-6.282-1.266-1.794-.846-3.278-1.997-4.458-3.454-1.18-1.456-2.067-3.178-2.655-5.166-.593-1.987-.886-4.12-.886-6.404 0-2.753.374-5.136 1.121-7.141.745-2.005 1.74-3.659 2.982-4.957 1.237-1.297 2.657-2.252 4.249-2.862a13.572 13.572 0 0 1 4.867-.916c.943 0 1.909.09 2.892.269.983.174 1.926.462 2.834.852.905.394 1.743.898 2.508 1.507a8.322 8.322 0 0 1 1.917 2.154h.12V.787h6.729V42.93M235.406 4.323a3.518 3.518 0 0 1-7.033 0 3.516 3.516 0 1 1 7.033 0m59.213 0a3.518 3.518 0 0 1-3.518 3.515 3.515 3.515 0 0 1-3.515-3.515 3.517 3.517 0 0 1 7.033 0m103.99 35.087a3.516 3.516 0 1 1-7.035.003 3.516 3.516 0 0 1 7.035-.003m10.554 0a3.516 3.516 0 1 1-7.034 0 3.516 3.516 0 0 1 3.516-3.516 3.519 3.519 0 0 1 3.518 3.516m-121.424 3.52h6.725V12.415h-6.725z"/></symbol><symbol id="logo-twitter" viewBox="0 0 274 223"><title>Twitter</title><path d="M85.98 223c-31.675 0-61.158-9.285-85.98-25.199 4.388.518 8.853.783 13.38.783 26.278 0 50.463-8.967 69.659-24.01-24.544-.453-45.258-16.669-52.395-38.953a56.014 56.014 0 0 0 10.552 1.006c5.116 0 10.071-.685 14.778-1.967-25.66-5.152-44.993-27.822-44.993-54.998 0-.236 0-.471.004-.705a55.865 55.865 0 0 0 25.406 7.015c-15.05-10.058-24.953-27.226-24.953-46.685 0-10.279 2.766-19.914 7.594-28.198 27.664 33.934 68.993 56.264 115.609 58.603a56.31 56.31 0 0 1-1.453-12.782c0-30.975 25.114-56.088 56.091-56.088 16.132 0 30.709 6.812 40.941 17.713a112.328 112.328 0 0 0 35.617-13.611c-4.188 13.097-13.081 24.089-24.662 31.031a112.148 112.148 0 0 0 32.215-8.832 114 114 0 0 1-27.988 29.035c.108 2.405.162 4.824.162 7.256C245.564 137.533 189.148 223 85.98 223" fill="currentColor"/></symbol><symbol id="logo-whatsapp" viewBox="0 0 90 90"><title>WhatsApp</title><path fill="currentColor" d="M90 43.84c0 24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 14.274-4.537a37.128 37.128 0 0 0 20.437 6.097c20.48 0 37.145-16.533 37.145-36.857S66.3 6.983 45.818 6.983zm22.31 46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72 1.076-2.797 3.495-3.43 4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 7.312-5.107.9-2.513.9-4.664.63-5.112z"/></symbol><symbol id="logo-youtube" viewBox="0 0 1022 719"><title>Youtube</title><path d="M1011.25 155.562s-9.98-70.389-40.608-101.386C931.8 13.493 888.262 13.291 868.296 10.91 725.359.577 510.946.577 510.946.577h-.444s-214.408 0-357.35 10.333c-19.967 2.381-63.489 2.583-102.345 43.266-30.626 30.997-40.592 101.386-40.592 101.386S0 238.222 0 320.881v77.493c0 82.658 10.215 165.317 10.215 165.317s9.966 70.39 40.592 101.387c38.856 40.684 89.896 39.397 112.629 43.661C245.153 716.575 510.725 719 510.725 719s214.634-.323 357.571-10.655c19.966-2.382 63.504-2.583 102.346-43.267 30.628-30.997 40.608-101.387 40.608-101.387s10.2-82.659 10.2-165.317v-77.493c0-82.659-10.2-165.319-10.2-165.319zM405.272 492.281l-.047-287 276 144-275.953 143z" fill="currentColor"/></symbol></svg>
// 3rd party brand colors - find more at brandcolors.net
$color-twitter : #55acee;
$color-facebook : #3b5998;
$color-youtube : #cd201f;
$color-pinterest : #bd081c;
$color-instagram : #e4405f;
$color-whatsapp : #25D366;
.socialCTA {
background-color: rgba(#fff, .2);
padding: 20px;
border-radius: 50%;
width: 50px;
height: 50px;
display: inline-block;
.icon {
max-width: 100%;
vertical-align: top;
width: 50px;
height: 50px;
}
&:hover {
background-color: rgba(#fff, .7);
.icon {
color: $orange;
}
}
}
.icon--twitter {
color: $color-twitter;
}
.icon--facebook {
color: $color-facebook;
}
.icon--instagram {
color: $color-instagram;
}
.icon--pinterest {
color: $color-pinterest;
}
.icon--youtube {
color: $color-youtube;
}
.icon--email {
color: $blue;
}
.icon--kickoff {
color: #fff;
}
.icon--whatsapp {
color: $color-whatsapp;
}
以上是关于scss SVG社交图标的主要内容,如果未能解决你的问题,请参考以下文章
scss 社交菜单 - 根据锚点href自动设置FontAwesome图标