Skip to content

Instantly share code, notes, and snippets.

@dreamyguy
Last active December 19, 2017 08:33
Show Gist options
  • Save dreamyguy/6a93fe5c0e98ca9a0e2f307e52301e94 to your computer and use it in GitHub Desktop.
Save dreamyguy/6a93fe5c0e98ca9a0e2f307e52301e94 to your computer and use it in GitHub Desktop.
SVGs as background images WITH COLOR!
$cl-black: #000;
$cl-green: #bada55;
$cl-red: #f00;
@function _buildIcon($icon) {
$icon: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20#{$icon}%3C%2Fsvg%3E';
@return $icon;
}
@function _buildPath($path, $viewbox, $parameters) {
$icon: 'viewBox%3D%22#{$viewbox}%22%3E%3Cpath%20fill%3D%22#{map-get($parameters, color)}%22%20d%3D%22#{$path}%22%20%2F%3E';
@return $icon;
}
@function icon(
$icon-name,
$color
){
$parameters: (
'color': $color
);
$icons: (
bars: _buildPath('M16%20132h416c8.837%200%2016-7.163%2016-16V76c0-8.837-7.163-16-16-16H16C7.163%2060%200%2067.163%200%2076v40c0%208.837%207.163%2016%2016%2016zm0%20160h416c8.837%200%2016-7.163%2016-16v-40c0-8.837-7.163-16-16-16H16c-8.837%200-16%207.163-16%2016v40c0%208.837%207.163%2016%2016%2016zm0%20160h416c8.837%200%2016-7.163%2016-16v-40c0-8.837-7.163-16-16-16H16c-8.837%200-16%207.163-16%2016v40c0%208.837%207.163%2016%2016%2016z', '0%200%20448%20512', $parameters),
check-circle-solid: _buildPath('M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z', '0%200%20512%20512', $parameters),
check-circle: _buildPath('M256%208C119.033%208%208%20119.033%208%20256s111.033%20248%20248%20248%20248-111.033%20248-248S392.967%208%20256%208zm0%2048c110.532%200%20200%2089.451%20200%20200%200%20110.532-89.451%20200-200%20200-110.532%200-200-89.451-200-200%200-110.532%2089.451-200%20200-200m140.204%20130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346%20303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719%2022.536c-4.705%204.667-4.736%2012.265-.068%2016.971l90.781%2091.516c4.667%204.705%2012.265%204.736%2016.97.068l172.589-171.204c4.704-4.668%204.734-12.266.067-16.971z', '0%200%20512%20512', $parameters),
check-square: _buildPath('M400%2032H48C21.49%2032%200%2053.49%200%2080v352c0%2026.51%2021.49%2048%2048%2048h352c26.51%200%2048-21.49%2048-48V80c0-26.51-21.49-48-48-48zm0%20400H48V80h352v352zm-35.864-241.724L191.547%20361.48c-4.705%204.667-12.303%204.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667%2012.303-4.637%2016.97.069l59.792%2060.277%20141.352-140.216c4.705-4.667%2012.303-4.637%2016.97.068l22.536%2022.718c4.667%204.706%204.637%2012.304-.068%2016.971z', '0%200%20448%20512', $parameters),
chevron-circle-right: _buildPath('M256%208c137%200%20248%20111%20248%20248S393%20504%20256%20504%208%20393%208%20256%20119%208%20256%208zm113.9%20231L234.4%20103.5c-9.4-9.4-24.6-9.4-33.9%200l-17%2017c-9.4%209.4-9.4%2024.6%200%2033.9L285.1%20256%20183.5%20357.6c-9.4%209.4-9.4%2024.6%200%2033.9l17%2017c9.4%209.4%2024.6%209.4%2033.9%200L369.9%20273c9.4-9.4%209.4-24.6%200-34z', '0%200%20512%20512', $parameters),
chevron-down: _buildPath('M207.029%20381.476L12.686%20187.132c-9.373-9.373-9.373-24.569%200-33.941l22.667-22.667c9.357-9.357%2024.522-9.375%2033.901-.04L224%20284.505l154.745-154.021c9.379-9.335%2024.544-9.317%2033.901.04l22.667%2022.667c9.373%209.373%209.373%2024.569%200%2033.941L240.971%20381.476c-9.373%209.372-24.569%209.372-33.942%200z', '0%200%20448%20512', $parameters),
chevron-right: _buildPath('M285.476%20272.971L91.132%20467.314c-9.373%209.373-24.569%209.373-33.941%200l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505%20256%2034.484%20101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373%2024.569-9.373%2033.941%200L285.475%20239.03c9.373%209.372%209.373%2024.568.001%2033.941z', '0%200%20320%20512', $parameters),
chevron-up: _buildPath('M240.971%20130.524l194.343%20194.343c9.373%209.373%209.373%2024.569%200%2033.941l-22.667%2022.667c-9.357%209.357-24.522%209.375-33.901.04L224%20227.495%2069.255%20381.516c-9.379%209.335-24.544%209.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569%200-33.941L207.03%20130.525c9.372-9.373%2024.568-9.373%2033.941-.001z', '0%200%20448%20512', $parameters),
circle-solid: _buildPath('M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208z', '0%200%20512%20512', $parameters),
circle: _buildPath('M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zm0%20448c-110.5%200-200-89.5-200-200S145.5%2056%20256%2056s200%2089.5%20200%20200-89.5%20200-200%20200z', '0%200%20512%20512', $parameters),
dot-circle: _buildPath('M256%2056c110.532%200%20200%2089.451%20200%20200%200%20110.532-89.451%20200-200%20200-110.532%200-200-89.451-200-200%200-110.532%2089.451-200%20200-200m0-48C119.033%208%208%20119.033%208%20256s111.033%20248%20248%20248%20248-111.033%20248-248S392.967%208%20256%208zm0%20168c-44.183%200-80%2035.817-80%2080s35.817%2080%2080%2080%2080-35.817%2080-80-35.817-80-80-80z', '0%200%20512%20512', $parameters),
exclamation-circle: _buildPath('M504%20256c0%20136.997-111.043%20248-248%20248S8%20392.997%208%20256C8%20119.083%20119.043%208%20256%208s248%20111.083%20248%20248zm-248%2050c-25.405%200-46%2020.595-46%2046s20.595%2046%2046%2046%2046-20.595%2046-46-20.595-46-46-46zm-43.673-165.346l7.418%20136c.347%206.364%205.609%2011.346%2011.982%2011.346h48.546c6.373%200%2011.635-4.982%2011.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884%200-12.356%205.78-11.981%2012.654z', '0%200%20512%20512', $parameters),
info-circle: _buildPath('M256%208C119.043%208%208%20119.083%208%20256c0%20136.997%20111.043%20248%20248%20248s248-111.003%20248-248C504%20119.083%20392.957%208%20256%208zm0%20110c23.196%200%2042%2018.804%2042%2042s-18.804%2042-42%2042-42-18.804-42-42%2018.804-42%2042-42zm56%20254c0%206.627-5.373%2012-12%2012h-88c-6.627%200-12-5.373-12-12v-24c0-6.627%205.373-12%2012-12h12v-64h-12c-6.627%200-12-5.373-12-12v-24c0-6.627%205.373-12%2012-12h64c6.627%200%2012%205.373%2012%2012v100h12c6.627%200%2012%205.373%2012%2012v24z', '0%200%20512%20512', $parameters),
lock: _buildPath('M400%20224h-24v-72C376%2068.2%20307.8%200%20224%200S72%2068.2%2072%20152v72H48c-26.5%200-48%2021.5-48%2048v192c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V272c0-26.5-21.5-48-48-48zm-104%200H152v-72c0-39.7%2032.3-72%2072-72s72%2032.3%2072%2072v72z', '0%200%20448%20512', $parameters),
minus-circle: _buildPath('M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zM124%20296c-6.6%200-12-5.4-12-12v-56c0-6.6%205.4-12%2012-12h264c6.6%200%2012%205.4%2012%2012v56c0%206.6-5.4%2012-12%2012H124z', '0%200%20512%20512', $parameters),
plus-circle: _buildPath('M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zm144%20276c0%206.6-5.4%2012-12%2012h-92v92c0%206.6-5.4%2012-12%2012h-56c-6.6%200-12-5.4-12-12v-92h-92c-6.6%200-12-5.4-12-12v-56c0-6.6%205.4-12%2012-12h92v-92c0-6.6%205.4-12%2012-12h56c6.6%200%2012%205.4%2012%2012v92h92c6.6%200%2012%205.4%2012%2012v56z', '0%200%20512%20512', $parameters),
square: _buildPath('M400%2032H48C21.5%2032%200%2053.5%200%2080v352c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V80c0-26.5-21.5-48-48-48zm-6%20400H54c-3.3%200-6-2.7-6-6V86c0-3.3%202.7-6%206-6h340c3.3%200%206%202.7%206%206v340c0%203.3-2.7%206-6%206z', '0%200%20448%20512', $parameters),
times-circle: _buildPath('M256%208C119%208%208%20119%208%20256s111%20248%20248%20248%20248-111%20248-248S393%208%20256%208zm121.6%20313.1c4.7%204.7%204.7%2012.3%200%2017L338%20377.6c-4.7%204.7-12.3%204.7-17%200L256%20312l-65.1%2065.6c-4.7%204.7-12.3%204.7-17%200L134.4%20338c-4.7-4.7-4.7-12.3%200-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3%200-17l39.6-39.6c4.7-4.7%2012.3-4.7%2017%200l65%2065.7%2065.1-65.6c4.7-4.7%2012.3-4.7%2017%200l39.6%2039.6c4.7%204.7%204.7%2012.3%200%2017L312%20256l65.6%2065.1z', '0%200%20512%20512', $parameters),
times: _buildPath('M323.1%20441l53.9-53.9c9.4-9.4%209.4-24.5%200-33.9L279.8%20256l97.2-97.2c9.4-9.4%209.4-24.5%200-33.9L323.1%2071c-9.4-9.4-24.5-9.4-33.9%200L192%20168.2%2094.8%2071c-9.4-9.4-24.5-9.4-33.9%200L7%20124.9c-9.4%209.4-9.4%2024.5%200%2033.9l97.2%2097.2L7%20353.2c-9.4%209.4-9.4%2024.5%200%2033.9L60.9%20441c9.4%209.4%2024.5%209.4%2033.9%200l97.2-97.2%2097.2%2097.2c9.3%209.3%2024.5%209.3%2033.9%200z', '0%200%20384%20512', $parameters),
unlock-alt: _buildPath('M400%20256H152V152.9c0-39.6%2031.7-72.5%2071.3-72.9%2040-.4%2072.7%2032.1%2072.7%2072v16c0%2013.3%2010.7%2024%2024%2024h32c13.3%200%2024-10.7%2024-24v-16C376%2068%20307.5-.3%20223.5%200%20139.5.3%2072%2069.5%2072%20153.5V256H48c-26.5%200-48%2021.5-48%2048v160c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48zM264%20408c0%2022.1-17.9%2040-40%2040s-40-17.9-40-40v-48c0-22.1%2017.9-40%2040-40s40%2017.9%2040%2040v48z', '0%200%20448%20512', $parameters),
unlock: _buildPath('M400%20256H152V152.9c0-39.6%2031.7-72.5%2071.3-72.9%2040-.4%2072.7%2032.1%2072.7%2072v16c0%2013.3%2010.7%2024%2024%2024h32c13.3%200%2024-10.7%2024-24v-16C376%2068%20307.5-.3%20223.5%200%20139.5.3%2072%2069.5%2072%20153.5V256H48c-26.5%200-48%2021.5-48%2048v160c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V304c0-26.5-21.5-48-48-48z', '0%200%20448%20512', $parameters),
user-circle-solid: _buildPath('M256%208C119.033%208%208%20119.033%208%20256s111.033%20248%20248%20248%20248-111.033%20248-248S392.967%208%20256%208zM144%20208c0-61.856%2050.144-112%20112-112s112%2050.144%20112%20112-50.144%20112-112%20112-112-50.144-112-112zm268.408%20172.663c-80.346%20100.411-232.375%20100.53-312.817%200C117.003%20362.973%20141.218%20352%20168%20352h18.204c44.03%2021.336%2095.495%2021.368%20139.592%200H344c26.782%200%2050.997%2010.973%2068.408%2028.663z', '0%200%20512%20512', $parameters),
user-circle: _buildPath('M256%208C119.033%208%208%20119.033%208%20256s111.033%20248%20248%20248%20248-111.033%20248-248S392.967%208%20256%208zm0%2048c110.532%200%20200%2089.451%20200%20200%200%2034.48-8.706%2066.909-24.04%2095.213-13.403-26.393-37.525-47.542-67.384-56.572C378.19%20273.809%20385.5%20249.468%20385.5%20224c0-71.569-57.919-129.5-129.5-129.5-71.569%200-129.5%2057.919-129.5%20129.5%200%2025.468%207.31%2049.809%2020.924%2070.641-29.821%209.018-53.962%2030.142-67.385%2056.572C64.706%20322.911%2056%20290.482%2056%20256c0-110.531%2089.451-200%20200-200zm-80%20168c0-44.183%2035.817-80%2080-80s80%2035.817%2080%2080-35.817%2080-80%2080-80-35.817-80-80zm-59.927%20174.943c1.519-33.998%2029.554-61.097%2063.927-61.097h14.171c38.337%2020.889%2085.337%2020.881%20123.659%200H332c34.373%200%2062.408%2027.099%2063.927%2061.097-77.746%2076.114-202.156%2076.065-279.854%200z', '0%200%20512%20512', $parameters)
);
$icon: _buildIcon(map-get($icons, $icon-name));
@return url("data:image/svg+xml;charset=utf8,#{$icon}");
}
.fa-icon {
background-repeat: no-repeat;
}
$_iconList: bars,
check-circle-solid,
check-circle,
check-square,
chevron-circle-right,
chevron-down,
chevron-right,
chevron-up,
circle-solid,
circle,
dot-circle,
exclamation-circle,
info-circle,
lock,
minus-circle,
plus-circle,
square,
times-circle,
times,
unlock-alt,
unlock,
user-circle-solid,
user-circle;
@each $_icon in $_iconList {
.fa-icon-#{nth($_icon, 1)} {
background-image: icon(#{nth($_icon, 1)}, $cl-black);
}
.fa-icon-#{nth($_icon, 1)}-red {
background-image: icon(#{nth($_icon, 1)}, $cl-red);
}
.fa-icon-#{nth($_icon, 1)}-green {
background-image: icon(#{nth($_icon, 1)}, $cl-green);
}
}
// To use:
// <div class="fa-icon fa-icon-check-circle-solid-red"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment