Skip to content

Instantly share code, notes, and snippets.

@woodcox

woodcox/URL-encode-font-awesome.scss

Last active April 2, 2021 20:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save woodcox/e97c4807d59fac6fe9b7bcc9597490a3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save woodcox/e97c4807d59fac6fe9b7bcc9597490a3 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
markup.html
<p>Hi this is an icon inline <i class="facebook-icon"></i></p>
<p>tshshgshsshkjshjsh</p>
<div class="my-svg-container-2"></div>
Raw
output.css
@charset "UTF-8";
/* https://github.com/reskwer/fontAwesome-SCSS */
.facebook-icon {
content: " ";
display: inline-block;
line-height: 60px;
width: 60px;
height: 60px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' style='enable-background:new 596 -596 1792 1792;' xml:space='preserve' fill='green' viewBox='596 -596 1792 1792'%3E%3Cpath d='M2165.4,893c-14-12.7-25-20-33-22c-10-2.7-18.3-0.7-25,6l-6,6c-64.7,64.7-139.7,115.3-225,152c-88.7,37.3-180.7,56-276,56 c-96,0-188-18.7-276-56c-85.3-36-160.7-86.7-226-152c-68-68-118.7-143.3-152-226c-18.7-46-34-99-46-159c0-2-0.3-3.3-1-4 c-3.3-18.7-22-25.3-56-20c-34.7,5.3-50.7,17.3-48,36c8,57.3,26,120.3,54,189c41.3,97.3,99.7,183.3,175,258 c74,74.7,160.3,133,259,175c101.3,42.7,207,64,317,64c108.7,0,214.3-21.3,317-64c97.3-40.7,183.7-99,259-175l6-6 C2195,937,2189.4,917.7,2165.4,893z M1699.4,292c-20-20-36-24.3-48-13l-65,65l-65-66c-4.7-3.3-9-5-13-5c-8.7,0-19,6-31,18 c-20,19.3-24.7,34.3-14,45l66,66l-66,65c-5.3,6.7-8,12.3-8,17c0,9.3,6,19,18,29l2,2c10.7,10.7,21,16,31,16c6.7,0,11.7-1.7,15-5 l66-66l62,61c6,6.7,12.3,10,19,10c10,0,20.7-5.7,32-17c18.7-18.7,21-35,7-49l-63-63l66-66C1721,324.7,1717.4,310,1699.4,292z M2135.4,164c-30-70-72-132-126-186c-53.3-53.3-115.7-95.3-187-126s-147.3-46-228-46c-81.3,0-158.3,15.3-231,46 c-30.7,12.7-66.7,33-108,61c-41.3,28-75.3,56-102,84h-1v-483h811c20,0,30-18.3,30-55s-10-55-30-55h-877c-11.3,0-20.5,3.8-27.5,11.5 s-10.5,16.5-10.5,26.5v680c0,10,5.2,18.8,15.5,26.5c10.3,7.7,22.5,13.2,36.5,16.5c14.7,5.3,27.5,6.3,38.5,3s18.2-6.5,21.5-9.5 c3.3-3,7.7-8.2,13-15.5l2-2c16-22.7,41.7-51.7,77-87c93.3-93.3,206.7-140,340-140c132.7,0,245.7,46.7,339,140c94,94,141,207,141,339 c0,63.3-12.2,124.3-36.5,183c-24.3,58.7-58.8,110.3-103.5,155s-96.7,79.2-156,103.5s-121,36.5-185,36.5c-88,0-168.7-22.3-242-67V391 c0-58.7,21.3-112,64-160c47.3-53.3,106.7-80,178-80c69.3,0,127.7,23.7,175,71c48,46.7,72,103.7,72,171c0,68.7-24,126.8-72,174.5 c-48,47.7-106.7,71.5-176,71.5c-8,0-18.2-1-30.5-3c-12.3-2-23.2-4-32.5-6l-14-3c-18.7-5.3-33.3,9-44,43c-10,33.3-5.7,53.7,13,61 c36,10.7,73.3,16,112,16c97.3,0,180.8-34.7,250.5-104c69.7-69.3,104.5-153,104.5-251c0-97.3-34.7-180.3-104-249s-153-103-251-103 c-98.7,0-183,34.3-253,103c-66,64-100,141.3-102,232v2v339h-1c-40-45.3-72.3-101-97-167c-6.7-18.7-26.7-22.7-60-12 c-34.7,11.3-49,26-43,44h1c0,5.3,5,18.7,15,40c28.7,69.3,70.3,131.3,125,186c53.3,53.3,115.7,95.3,187,126 c71.3,30.7,147.3,46,228,46c80.7,0,156.7-15.3,228-46s133.7-72.7,187-126c54-54,96-116,126-186c30.7-73.3,46-149.3,46-228 C2181.4,315,2166,238.7,2135.4,164z M1915.4-340c-101.3-42.7-206.7-64-316-64c-112.7,0-212.3,19-299,57c-8.7,2.7-14,9.3-16,20 c-0.7,8.7,2,21.3,8,38c12,31.3,27,43.7,45,37c86-32.7,173.3-49,262-49c98.7,0,190.7,18.7,276,56c67.3,28,136.3,72.3,207,133 c4.7,4.7,10,7,16,7c8.7,0,21.7-8.7,39-26c7.3-8.7,12.8-15.7,16.5-21c3.7-5.3,5.5-11.3,5.5-18s-3-12.7-9-18 C2085-250.7,2006.7-301.3,1915.4-340z'/%3E%3C/svg%3E");
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Raw
URL-encode-font-awesome.scss
/* https://github.com/reskwer/fontAwesome-SCSS */
@mixin fa($fa-icon: $fa-user, $fa-color: $icon-color, $fa-size: $icon-size){
$fa-svg: '<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 596 -596 1792 1792;" xml:space="preserve" fill="#{$fa-color}" #{$fa-icon}';
content: '\00A0';
display: inline-block;
line-height: $fa-size;
width: $fa-size;
height: $fa-size;
background-image: url(svg-encode($fa-svg));
}
// Add your SVG viewbox code here:
$fa-500px:'viewBox="596 -596 1792 1792"><path d="M2165.4,893c-14-12.7-25-20-33-22c-10-2.7-18.3-0.7-25,6l-6,6c-64.7,64.7-139.7,115.3-225,152c-88.7,37.3-180.7,56-276,56 c-96,0-188-18.7-276-56c-85.3-36-160.7-86.7-226-152c-68-68-118.7-143.3-152-226c-18.7-46-34-99-46-159c0-2-0.3-3.3-1-4 c-3.3-18.7-22-25.3-56-20c-34.7,5.3-50.7,17.3-48,36c8,57.3,26,120.3,54,189c41.3,97.3,99.7,183.3,175,258 c74,74.7,160.3,133,259,175c101.3,42.7,207,64,317,64c108.7,0,214.3-21.3,317-64c97.3-40.7,183.7-99,259-175l6-6 C2195,937,2189.4,917.7,2165.4,893z M1699.4,292c-20-20-36-24.3-48-13l-65,65l-65-66c-4.7-3.3-9-5-13-5c-8.7,0-19,6-31,18 c-20,19.3-24.7,34.3-14,45l66,66l-66,65c-5.3,6.7-8,12.3-8,17c0,9.3,6,19,18,29l2,2c10.7,10.7,21,16,31,16c6.7,0,11.7-1.7,15-5 l66-66l62,61c6,6.7,12.3,10,19,10c10,0,20.7-5.7,32-17c18.7-18.7,21-35,7-49l-63-63l66-66C1721,324.7,1717.4,310,1699.4,292z M2135.4,164c-30-70-72-132-126-186c-53.3-53.3-115.7-95.3-187-126s-147.3-46-228-46c-81.3,0-158.3,15.3-231,46 c-30.7,12.7-66.7,33-108,61c-41.3,28-75.3,56-102,84h-1v-483h811c20,0,30-18.3,30-55s-10-55-30-55h-877c-11.3,0-20.5,3.8-27.5,11.5 s-10.5,16.5-10.5,26.5v680c0,10,5.2,18.8,15.5,26.5c10.3,7.7,22.5,13.2,36.5,16.5c14.7,5.3,27.5,6.3,38.5,3s18.2-6.5,21.5-9.5 c3.3-3,7.7-8.2,13-15.5l2-2c16-22.7,41.7-51.7,77-87c93.3-93.3,206.7-140,340-140c132.7,0,245.7,46.7,339,140c94,94,141,207,141,339 c0,63.3-12.2,124.3-36.5,183c-24.3,58.7-58.8,110.3-103.5,155s-96.7,79.2-156,103.5s-121,36.5-185,36.5c-88,0-168.7-22.3-242-67V391 c0-58.7,21.3-112,64-160c47.3-53.3,106.7-80,178-80c69.3,0,127.7,23.7,175,71c48,46.7,72,103.7,72,171c0,68.7-24,126.8-72,174.5 c-48,47.7-106.7,71.5-176,71.5c-8,0-18.2-1-30.5-3c-12.3-2-23.2-4-32.5-6l-14-3c-18.7-5.3-33.3,9-44,43c-10,33.3-5.7,53.7,13,61 c36,10.7,73.3,16,112,16c97.3,0,180.8-34.7,250.5-104c69.7-69.3,104.5-153,104.5-251c0-97.3-34.7-180.3-104-249s-153-103-251-103 c-98.7,0-183,34.3-253,103c-66,64-100,141.3-102,232v2v339h-1c-40-45.3-72.3-101-97-167c-6.7-18.7-26.7-22.7-60-12 c-34.7,11.3-49,26-43,44h1c0,5.3,5,18.7,15,40c28.7,69.3,70.3,131.3,125,186c53.3,53.3,115.7,95.3,187,126 c71.3,30.7,147.3,46,228,46c80.7,0,156.7-15.3,228-46s133.7-72.7,187-126c54-54,96-116,126-186c30.7-73.3,46-149.3,46-228 C2181.4,315,2166,238.7,2135.4,164z M1915.4-340c-101.3-42.7-206.7-64-316-64c-112.7,0-212.3,19-299,57c-8.7,2.7-14,9.3-16,20 c-0.7,8.7,2,21.3,8,38c12,31.3,27,43.7,45,37c86-32.7,173.3-49,262-49c98.7,0,190.7,18.7,276,56c67.3,28,136.3,72.3,207,133 c4.7,4.7,10,7,16,7c8.7,0,21.7-8.7,39-26c7.3-8.7,12.8-15.7,16.5-21c3.7-5.3,5.5-11.3,5.5-18s-3-12.7-9-18 C2085-250.7,2006.7-301.3,1915.4-340z"/></svg>';
// Thanks to Hugo Giraudel for his str-replace function (http://www.sassmeister.com/gist/1b4f2da5527830088e4d)
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
$encoding-reference: (
//('%','%25'), // Encode "%" first, otherwise the "%" from encoded code would be encoded again (which would be bad)
('<','%3C'),
('>','%3E'),
//('"','%22'), // Replace " with ' because that's shorter than %22 and normally working
('"','\''),
('#','%23'),
('&','%26')
);
@function svg-encode($out-svg) {
@each $char, $encoded in $encoding-reference {
$out-svg: str-replace($out-svg, $char, $encoded);
}
@return 'data:image/svg+xml,' + $out-svg;
}
// Call the svg-encode function and pass in your svg viewbox:
.facebook-icon {
@include fa($fa-500px, green, 60px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment