commit 603ef1514735d564e14625ded89f5e16ec321982 Author: mirzaev Date: Sun Nov 23 17:20:17 2025 +0700 moved from `kodorvan/understyle` diff --git a/LICENCE b/LICENCE new file mode 100644 index 0000000..53794a2 --- /dev/null +++ b/LICENCE @@ -0,0 +1,12 @@ +DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE +Version 2, December 2004 + +Copyright (C) 2004 Sam Hocevar + +Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed. + +DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE +TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. You just DO WHAT THE FUCK YOU WANT TO. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..6aa5cf5 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# Pure CSS icons +Icons for a wide variety of tasks, drawn entirely in **pure CSS** + +*Inspired by and partially borrowed from **[css.gg](https://css.gg/)*** + +## Intstruction +```HTML + + + +``` +more real and complex: +```HTML + +``` diff --git a/arrow.css b/arrow.css new file mode 100644 index 0000000..5081da8 --- /dev/null +++ b/arrow.css @@ -0,0 +1,44 @@ +@charset "UTF-8"; + +i.icon.arrow:not(.circle, .square) { + position: relative; + width: 22px; + height: 22px; + display: block; + box-sizing: border-box; + transform: rotate(var(--rotate)); +} + +i.icon.arrow.short:not(.circle, .square) { + width: 10px; +} + +i.icon.arrow:not(.circle, .square)::after, +i.icon.arrow:not(.circle, .square)::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + right: 3px; +} + +i.icon.arrow:not(.circle, .square)::after { + width: 8px; + height: 8px; + border-top: 2px solid; + border-right: 2px solid; + transform: rotate(45deg); + bottom: 7px; +} + +i.icon.arrow.small:not(.circle, .square)::after { + width: 7px; + height: 7px; +} + +i.icon.arrow:not(.circle, .square, .short)::before { + width: 16px; + height: 2px; + bottom: 10px; + background-color: currentColor; +} diff --git a/arrow_circle.css b/arrow_circle.css new file mode 100644 index 0000000..3920757 --- /dev/null +++ b/arrow_circle.css @@ -0,0 +1,36 @@ +@charset "UTF-8"; + +i.icon.arrow.circle { + box-sizing: border-box; + position: relative; + display: block; + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 20px; +} + +i.icon.arrow.circle::after, +i.icon.arrow.circle::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + right: 4px; +} + +i.icon.arrow.circle::after { + width: 6px; + height: 6px; + border-top: 2px solid; + border-right: 2px solid; + transform: rotate(45deg); + bottom: 6px; +} + +i.icon.arrow.circle::before { + width: 10px; + height: 2px; + bottom: 8px; + background: currentColor; +} diff --git a/calculator.css b/calculator.css new file mode 100644 index 0000000..6788325 --- /dev/null +++ b/calculator.css @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +i.icon.calculator { + position: relative; + width: 18px; + height: 22px; + box-sizing: border-box; + display: block; + border-radius: 2px; + border: 2px solid; + + &::after, + &::before { + top: 2px; + left: 2px; + content: ""; + position: absolute; + width: 10px; + height: 2px; + box-sizing: border-box; + display: block; + background-color: currentColor; + } + + &::after { + top: 6px; + width: 2px; + box-shadow: + 4px 0 0, + 8px 0 0, + 0 4px 0, + 4px 4px 0, + 8px 4px 0, + 0 8px 0, + 4px 8px 0, + 8px 8px 0, + 8px 6px 0; + } +} diff --git a/close.css b/close.css new file mode 100644 index 0000000..955d247 --- /dev/null +++ b/close.css @@ -0,0 +1,31 @@ +@charset "UTF-8"; + +i.icon.close { + --diameter: 22px; + box-sizing: border-box; + position: relative; + display: block; + width: var(--diameter); + height: var(--diameter); + border: 2px solid transparent; + border-radius: 40px; +} + +i.icon.close::after, +i.icon.close::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 16px; + height: 2px; + background: currentColor; + transform: rotate(45deg); + border-radius: 5px; + top: 8px; + left: 1px; +} + +i.icon.close::after { + transform: rotate(-45deg); +} diff --git a/comment.css b/comment.css new file mode 100644 index 0000000..6599051 --- /dev/null +++ b/comment.css @@ -0,0 +1,40 @@ +@charset "UTF-8"; + +i.icon.comment { + position: relative; + width: 20px; + height: 16px; + display: block; + box-sizing: border-box; + border: 2px solid; + border-bottom: 0; + box-shadow: + -6px 8px 0 -6px, + 6px 8px 0 -6px; +} + +i.icon.comment::after, +i.icon.comment::before { + content: ""; + position: absolute; + width: 8px; + display: block; + box-sizing: border-box; +} + +i.icon.comment::before { + right: 4px; + bottom: -6px; + height: 6px; + border: 2px solid; + border-top-color: transparent; + border-bottom-left-radius: 20px; +} + +i.icon.comment::after { + left: 4px; + top: 4px; + height: 2px; + background-color: currentColor; + box-shadow: 0 4px 0 0; +} diff --git a/corner.css b/corner.css new file mode 100644 index 0000000..9a0514b --- /dev/null +++ b/corner.css @@ -0,0 +1,62 @@ +@charset "UTF-8"; + +i.icon.corner { + position: relative; + width: 22px; + height: 22px; + display: block; + box-sizing: border-box; +} + +i.icon.corner::after, +i.icon.corner::before { + content: ""; + position: absolute; + display: block; + box-sizing: border-box; +} + +i.icon.corner.left::after, +i.icon.corner.left::before { + left: 3px; +} + +i.icon.corner.right::after, +i.icon.corner.right::before { + right: 3px; +} + +i.icon.corner::after { + bottom: 3px; + width: 8px; + height: 8px; + transform: rotate(45deg); +} + +i.icon.corner.left::after { + border-left: 2px solid; + border-bottom: 2px solid; +} + +i.icon.corner.right::after { + border-top: 2px solid; + border-right: 2px solid; +} + +i.icon.corner::before { + bottom: 6px; + width: 16px; + height: 12px; + border-bottom: 2px solid; +} + +i.icon.corner.left::before { + border-bottom-right-radius: 4px; + border-right: 2px solid; +} + +i.icon.corner.right::before { + border-bottom-left-radius: 4px; + border-left: 2px solid; +} + diff --git a/display_grid.css b/display_grid.css new file mode 100644 index 0000000..fb0f544 --- /dev/null +++ b/display_grid.css @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +i.icon.display.grid { + display: block; + height: 14px; + width: 14px; + box-sizing: border-box; + position: relative; + border: 2px solid transparent; + box-shadow: 0 0 0 2px; + + &::after, + &::before { + top: 0; + left: 0; + position: absolute; + content: ""; + width: 10px; + height: 4px; + box-sizing: border-box; + display: block; + border-right: 4px solid; + border-left: 4px solid; + } + + &::before { + top: 6px; + } +} diff --git a/enter.css b/enter.css new file mode 100644 index 0000000..70e0b6d --- /dev/null +++ b/enter.css @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +i.icon.enter { + position: relative; + width: 16px; + height: 18px; + box-sizing: border-box; + display: block; + border: 2px solid; + border-left: 0; + box-shadow: + -8px -6px 0 -6px, + -8px 6px 0 -6px; +} + +i.icon.enter::after, +i.icon.enter::before { + content: ""; + position: absolute; + right: 4px; + display: block; + box-sizing: border-box; +} + +i.icon.enter::before { + top: 6px; + width: 16px; + height: 2px; + background: currentColor; +} + +i.icon.enter::after { + top: 4px; + width: 6px; + height: 6px; + border-right: 2px solid; + border-top: 2px solid; + transform: rotate(45deg); +} diff --git a/hashtag.css b/hashtag.css new file mode 100644 index 0000000..d1d7975 --- /dev/null +++ b/hashtag.css @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +i.icon.hashtag { + position: relative; + width: 8px; + height: 16px; + box-sizing: border-box; + display: block; + border-left: 2px solid; + border-right: 2px solid; + + &::before { + top: 4px; + left: -6px; + position: absolute; + content: ""; + width: 16px; + height: 8px; + box-sizing: border-box; + display: block; + border-top: 2px solid; + border-bottom: 2px solid; + } +} diff --git a/house.css b/house.css new file mode 100644 index 0000000..827aeea --- /dev/null +++ b/house.css @@ -0,0 +1,78 @@ +@charset "UTF-8"; + +i.icon.house:not(.panelka) { + position: relative; + margin-bottom: -7px; + width: 18px; + height: 14px; + display: block; + box-sizing: border-box; + border: 2px solid; + border-top: 0; + border-bottom: 0; + border-top-right-radius: 3px; + border-top-left-radius: 3px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + background: + linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 + bottom/4px 2px, + linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right + bottom/4px 2px; +} + +i.icon.house:not(.panelka).small { + margin-bottom: -5px; + width: 14px; + height: 12px; + background: + linear-gradient(to left, currentColor 4px, transparent 0) no-repeat 0 + bottom / 4px 2px, + linear-gradient(to left, currentColor 2px, transparent 0) no-repeat right + bottom / 2px 2px; +} + +i.icon.house:not(.panelka)::after, +i.icon.house:not(.panelka)::before { + content: ""; + position: absolute; + display: block; + box-sizing: border-box; +} + +i.icon.house:not(.panelka)::before { + left: 0; + top: -5px; + width: 14px; + height: 14px; + border-radius: 3px; + transform: rotate(45deg); + border-top: 2px solid; + border-left: 2px solid; + border-top-left-radius: 4px; +} + +i.icon.house:not(.panelka).small::before { + top: -4px; + width: 10px; + height: 10px; + border-top-left-radius: 3px; +} + +i.icon.house:not(.panelka)::after { + left: 3px; + bottom: 0; + width: 8px; + height: 10px; + border: 2px solid; + border-radius: 100px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-bottom: 0; +} + +i.icon.house:not(.panelka).small::after { + left: 2px; + width: 6px; + height: 8px; +} diff --git a/house_panelka.css b/house_panelka.css new file mode 100644 index 0000000..d9f7f5c --- /dev/null +++ b/house_panelka.css @@ -0,0 +1,75 @@ +@charset "UTF-8"; + +i.icon.house.panelka { + position: relative; + left: -8px; + width: 12px; + height: 18px; + box-sizing: border-box; + display: block; + border: 2px solid; + background: + linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat center + 2px/12px 2px, + linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat center + 6px/12px 2px, + linear-gradient(to bottom, currentColor 5px, transparent 0) no-repeat center + 10px/12px 2px, + linear-gradient(to bottom, currentColor 18px, transparent 0) no-repeat + center/2px 18px; +} + +i.icon.house.panelka.small { + width: 10px; + height: 14px; + background: + linear-gradient(to bottom, currentColor 3px, transparent 0) no-repeat center + 2px / 10px 2px, + linear-gradient(to bottom, currentColor 3px, transparent 0) no-repeat center + 6px / 10px 2px, + linear-gradient(to bottom, currentColor 14px, transparent 0) no-repeat + center / 2px 14px; +} + +i.icon.house.panelka::after, +i.icon.house.panelka::before { + content: ""; + position: absolute; + box-sizing: border-box; + display: block; +} + +i.icon.house.panelka::before { + top: 6px; + right: -8px; + width: 2px; + height: 2px; + background: currentColor; + box-shadow: + 0 4px 0, + -4px 4px 0, + -4px 0 0; +} + +i.icon.house.panelka.small::before { + top: 4px; + right: -8px; + box-shadow: + 0 3px 0, + -3px 3px 0, + -3px 0 0; +} + +i.icon.house.panelka::after { + left: 8px; + bottom: -2px; + width: 12px; + height: 14px; + border: 2px solid; +} + +i.icon.house.panelka.small::after { + left: 6px; + width: 11px; + height: 11px; +} diff --git a/layout_grid.css b/layout_grid.css new file mode 100644 index 0000000..922ae8c --- /dev/null +++ b/layout_grid.css @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +i.icon.layout.grid, +i.icon.layout.grid::after, +i.icon.layout.grid::before { + position: relative; + width: 10px; + height: 10px; + box-sizing: border-box; + display: block; +} + +i.icon.layout.grid { + &::after, + &::before { + position: absolute; + content: ""; + height: 4px; + border-left: 4px solid; + border-right: 4px solid; + } + + &::before { + top: 0; + } + + &::after { + bottom: 0; + } +} diff --git a/list_add.css b/list_add.css new file mode 100644 index 0000000..871c498 --- /dev/null +++ b/list_add.css @@ -0,0 +1,55 @@ +@charset "UTF-8"; + +i.icon.list.add { + box-sizing: border-box; + position: relative; + display: block; + width: 12px; + height: 6px; + border-top: 0 solid transparent; + border-bottom: 2px solid transparent; + box-shadow: + inset 0 -2px 0, + -2px 4px 0 -2px, + 0 -2px 0 0; +} + +i.icon.list.add.small { + width: 10px; + box-shadow: + inset 0 -2px 0, + -1px 3px 0 -1px, + 0 -2px 0 0; +} + +i.icon.list.add::after, +i.icon.list.add::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 10px; + height: 2px; + background: currentColor; + top: 6px; + right: -8px; +} + +i.icon.list.add.small::after, +i.icon.list.add.small::before { + width: 8px; +} + +i.icon.list.add::before { + width: 2px; + height: 10px; + top: 2px; + right: -4px; +} + +i.icon.list.add.small::before { + width: 2px; + height: 8px; + top: 3px; + right: -5px; +} diff --git a/loading_spinner.css b/loading_spinner.css new file mode 100644 index 0000000..aba7592 --- /dev/null +++ b/loading_spinner.css @@ -0,0 +1,32 @@ +@charset "UTF-8"; + +@keyframes loading_spinner { + 0% { + transform: rotate(0deg); + } + + to { + transform: rotate(359deg); + } +} + +i.icon.loading.spinner, +i.icon.loading.spinner::before { + box-sizing: border-box; + position: relative; + display: block; + width: 20px; + height: 20px; +} + +i.icon.loading.spinner::before { + content: ""; + position: absolute; + border-radius: 100px; + border: 3px solid transparent; + border-top-color: currentColor; +} + +i.icon.loading.spinner.animated::before { + animation: loading_spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite; +} diff --git a/minus.css b/minus.css new file mode 100644 index 0000000..44a8331 --- /dev/null +++ b/minus.css @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +i.icon.minus { + position: relative; + width: 16px; + height: 2px; + box-sizing: border-box; + display: block; + border-radius: 10px; + background-color: currentColor; + + &:is(.small) { + width: 10px; + } +} diff --git a/pen.css b/pen.css new file mode 100644 index 0000000..4976dfd --- /dev/null +++ b/pen.css @@ -0,0 +1,45 @@ +@charset "UTF-8"; + +i.icon.pen { + position: relative; + margin-right: -2px; + width: 14px; + height: 4px; + box-sizing: border-box; + display: block; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + border-right: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0; + transform: rotate(-45deg); + + &:after, + &:before { + position: absolute; + content: ""; + display: block; + box-sizing: border-box; + } + + &:before { + top: 0; + right: -6px; + width: 3px; + height: 4px; + border-radius: 1px; + border-left: 0; + background: currentColor; + } + + &:after { + top: -2px; + left: -11px; + width: 8px; + height: 7px; + border-top: 4px solid transparent; + border-right: 7px solid; + border-bottom: 4px solid transparent; + } +} diff --git a/pin.css b/pin.css new file mode 100644 index 0000000..2f5a0f6 --- /dev/null +++ b/pin.css @@ -0,0 +1,38 @@ +@charset "UTF-8"; + +i.icon.pin { + box-sizing: border-box; + position: relative; + margin-top: -4px; + width: 18px; + height: 18px; + display: block; + border: 2px solid; + border-radius: 100% 100% 0 100%; + transform: rotate(45deg); +} + +i.icon.pin.small { + width: 15px; + height: 15px; +} + +i.icon.pin::before { + content: ""; + position: absolute; + left: 3px; + top: 3px; + width: 8px; + height: 8px; + display: block; + box-sizing: border-box; + border: 2px solid; + border-radius: 40px; +} + +i.icon.pin.small::before { + top: 2px; + left: 2px; + width: 7px; + height: 7px; +} diff --git a/plus.css b/plus.css new file mode 100644 index 0000000..0919115 --- /dev/null +++ b/plus.css @@ -0,0 +1,35 @@ +@charset "UTF-8"; + +i.icon.plus, +i.icon.plus::after { + display: block; + box-sizing: border-box; + background: currentColor; + border-radius: 10px; +} + +i.icon.plus { + margin-top: -2px; + position: relative; + width: 16px; + height: 2px; +} + +i.icon.plus.small { + width: 10px; +} + +i.icon.plus::after { + content: ""; + position: absolute; + width: 2px; + height: 16px; + top: -7px; + left: 7px; +} + +i.icon.plus.small::after { + height: 10px; + top: -4px; + left: 4px; +} diff --git a/search.css b/search.css new file mode 100644 index 0000000..ad87848 --- /dev/null +++ b/search.css @@ -0,0 +1,28 @@ +@charset "UTF-8"; + +i.icon.search { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(1); + width: 16px; + height: 16px; + border: 2px solid; + border-radius: 100%; + margin-left: -4px; + margin-top: -4px; +} + +i.icon.search::after { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + border-radius: 3px; + width: 2px; + height: 8px; + background: currentColor; + transform: rotate(-45deg); + top: 10px; + left: 12px; +} diff --git a/share.css b/share.css new file mode 100644 index 0000000..e421c7b --- /dev/null +++ b/share.css @@ -0,0 +1,37 @@ +@charset "UTF-8"; + +i.icon.share { + position: relative; + width: 6px; + height: 6px; + display: block; + box-sizing: border-box; + border-radius: 100px; + background-color: currentColor; + box-shadow: + 10px -6px 0, + 10px 6px 0; +} + +i.icon.share::after, +i.icon.share::before { + content: ""; + position: absolute; + left: 2px; + width: 10px; + height: 2px; + display: block; + box-sizing: border-box; + border-radius: 3px; + background-color: currentColor; +} + +i.icon.share::before { + top: 0; + transform: rotate(-35deg); +} + +i.icon.share::after { + bottom: 0; + transform: rotate(35deg); +} diff --git a/shopping_bag.css b/shopping_bag.css new file mode 100644 index 0000000..e24f03e --- /dev/null +++ b/shopping_bag.css @@ -0,0 +1,24 @@ +@charset "UTF-8"; + +i.icon.shopping.bag, +i.icon.shopping.bag::after { + position: relative; + width: 20px; + height: 20px; + box-sizing: border-box; + display: block; + border-radius: 3px; + border: 2px solid; +} + +i.icon.shopping.bag::after { + content: ""; + position: absolute; + left: 3px; + top: 2px; + width: 10px; + height: 6px; + border-top: 0; + border-bottom-left-radius: 120px; + border-bottom-right-radius: 120px; +} diff --git a/shopping_cart.css b/shopping_cart.css new file mode 100644 index 0000000..4b1ce60 --- /dev/null +++ b/shopping_cart.css @@ -0,0 +1,41 @@ +@charset "UTF-8"; + +i.icon.shopping.cart { + display: block; + box-sizing: border-box; + position: relative; + width: 20px; + height: 21px; + background: + linear-gradient(to left, currentColor 12px, transparent 0) no-repeat -1px + 6px/18px 2px, + linear-gradient(to left, currentColor 12px, transparent 0) no-repeat 6px + 14px/11px 2px, + linear-gradient(to left, currentColor 12px, transparent 0) no-repeat 0 + 2px/4px 2px, + radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 12px + 17px/4px 4px, + radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 6px + 17px/4px 4px; +} + +i.icon.shopping.cart::after, +i.icon.shopping.cart::before { + content: ""; + display: block; + position: absolute; + box-sizing: border-box; + width: 2px; + height: 14px; + background: currentColor; + top: 2px; + left: 4px; + transform: skew(12deg); +} + +i.icon.shopping.cart::after { + height: 10px; + top: 6px; + left: 16px; + transform: skew(-12deg); +} diff --git a/site.css b/site.css new file mode 100644 index 0000000..0db177c --- /dev/null +++ b/site.css @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +i.icon.site { + position: relative; + width: 22px; + height: 18px; + box-sizing: border-box; + display: block; + border-radius: 3px; + border: 2px solid; + box-shadow: 0 -1px 0; + + &::after, + &::before { + top: 2px; + position: absolute; + content: ""; + width: 6px; + box-sizing: border-box; + display: block; + } + + &::before { + left: 2px; + height: 2px; + border-radius: 3px; + background-color: currentColor; + box-shadow: + 0 4px 0, + 0 8px 0; + } + + &::after { + right: 2px; + height: 10px; + border-radius: 1px; + border: 2px solid; + } +} diff --git a/smile.css b/smile.css new file mode 100644 index 0000000..3cbb27a --- /dev/null +++ b/smile.css @@ -0,0 +1,46 @@ +@charset "UTF-8"; + +i.icon.smile { + position: relative; + width: 20px; + height: 20px; + box-sizing: border-box; + display: block; + border-radius: 100px; + border: 2px solid; + + &::after, + &::before { + left: 4px; + position: absolute; + content: ""; + box-sizing: border-box; + display: block; + } + + &::before { + top: 5px; + width: 2px; + height: 2px; + border-radius: 50%; + background-color: currentColor; + box-shadow: 6px 0 0; + } + + &::after { + top: 9px; + width: 8px; + height: 4px; + border-radius: 150px; + border-top-left-radius: 0; + border-top-right-radius: 0; + border: 2px solid; + border-top-color: transparent; + } + + &:is(.open) { + &::after { + border-top-color: initial; + } + } +} diff --git a/trash.css b/trash.css new file mode 100644 index 0000000..750c1f2 --- /dev/null +++ b/trash.css @@ -0,0 +1,49 @@ +@charset "UTF-8"; + +i.icon.trash { + box-sizing: border-box; + position: relative; + display: block; + width: 10px; + height: 12px; + border: 2px solid transparent; + box-shadow: + 0 0 0 2px, + inset -2px 0 0, + inset 2px 0 0; + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + margin-top: 4px; +} + +i.icon.trash.small { + height: 9px; +} + +i.icon.trash::after, +i.icon.trash::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; +} + +i.icon.trash::after { + background: currentColor; + border-radius: 3px; + width: 16px; + height: 2px; + top: -4px; + left: -5px; +} + +i.icon.trash::before { + width: 10px; + height: 4px; + border: 2px solid; + border-bottom: transparent; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + top: -7px; + left: -2px; +} diff --git a/user.css b/user.css new file mode 100644 index 0000000..2723bbc --- /dev/null +++ b/user.css @@ -0,0 +1,34 @@ +@charset "UTF-8"; + +i.icon.user { + width: 12px; + height: 18px; + display: block; + box-sizing: border-box; +} + +i.icon.user::after, +i.icon.user::before { + content: ""; + position: absolute; + display: block; + box-sizing: border-box; + border: 2px solid; +} + +i.icon.user::before { + left: 2px; + top: calc(0px - var(--grow, 0px)); + width: 8px; + height: 8px; + border-radius: 30px; +} + +i.icon.user::after { + top: calc(9px - var(--grow, -0px)); + width: 12px; + height: calc(9px + var(--grow, 0px)); + border-bottom: 0; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +}