Removing font icon support in favor of SVGs

adamculpepper · May 22, 2020 · feb4417 · feb4417
1 parent 62de77b
commit feb4417
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/toggle-radios.css b/toggle-radios.css
@@ -1,5 +1,5 @@
 /*
-Toggle Radios v1.3
+Toggle Radios v1.4
 by Adam Culpepper | @adamculpepper
 https://github.com/adamculpepper/toggle-radios
 */
@@ -16,8 +16,8 @@ https://github.com/adamculpepper/toggle-radios
 .toggle-radio input:last-of-type + label {border-radius:0 0 4px 4px;}
 
 /* Indicators for smaller devices (stacked) */
-.toggle-radio > input + label:before			{content:'⮽'; margin-right:0.50rem;}
-.toggle-radio > input:checked + label:before	{content:'🗹';}
+.toggle-radio > input + label:before {content:''; display:inline-block; width:16px; height:16px; margin-right:0.50rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23000;' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center center; background-size:16px 16px;}
+.toggle-radio > input:checked + label:before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23000;' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");}
 
 /* //////////////////////////
 CORE STYLES BELOW - NO TOUCHY
@@ -26,7 +26,7 @@ CORE STYLES BELOW - NO TOUCHY
 .toggle-radio > input[type='radio'] {display:none;}
 .toggle-radio > input[disabled] + label {opacity:0.50;}
 .toggle-radio > input[disabled] + label:hover {cursor:not-allowed;}
-.toggle-radio > input + label {display:block; margin-bottom:0; padding:5px 10px; cursor:pointer;}
+.toggle-radio > input + label {display:flex; margin-bottom:0; padding:5px 10px; cursor:pointer; align-items:center;}
 
 /* Transitions */
 .toggle-radio > input:checked + label {transition:background 300ms linear;}
@@ -40,14 +40,12 @@ CORE STYLES ABOVE - NO TOUCHY
 .toggle-radio[data-style='rounded'] > input:last-of-type + label		{border-radius:0 0 20px 20px;}
 
 /* Style: Square */
-.toggle-radio[data-style='square'] > input + label						{border-radius:0;}
-
-/* Font Icons */
-.toggle-radio[data-icons='fontawesome'] > input + label:before			{content:'\f111'; font-family:'FontAwesome';}
-.toggle-radio[data-icons='fontawesome'] > input:checked + label:before	{content:'\f058';}
+.toggle-radio[data-style='square'] > input + label			{border-radius:0;}
 
 /* Color */
 .toggle-radio[data-color] > input + label					{color:#fff;}
+.toggle-radio[data-color] > input + label:before 			{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23fff;' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z'/%3E%3C/svg%3E");}
+.toggle-radio[data-color] > input:checked + label:before	{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23fff;' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");}
 
 /* Color: Red */
 .toggle-radio[data-color='red'] > input + label				{background:#e74c3c;}