Как нарисовать символ галочки с помощью CSS? Символы, которые я нахожу с помощью Unicode, не являются эстетически приятными.
ИЗМЕНИТЬ Значки шрифтов - отличное предложение. Я искал что-то вроде this.
Как нарисовать символ галочки с помощью CSS? Символы, которые я нахожу с помощью Unicode, не являются эстетически приятными.
ИЗМЕНИТЬ Значки шрифтов - отличное предложение. Я искал что-то вроде this.
Теперь вы можете включать веб-шрифты и даже уменьшать размер файла только с помощью глифов. https://github.com/fontello/fontello http://fontello.com/
li:before {
content:'[add icon symbol here]';
font-family: [my cool web icon font here];
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
color: #999;
}
Вы можете нарисовать два прямоугольника и поместить их рядом друг с другом. А затем поверните на 45 градусов. Измените параметры width/height/top/left для любых вариантов.
HTML
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
CSS
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
Вот еще одно решение для CSS. он занимает меньше строк кода.
ul li:before
{content:'\2713';
display:inline-block;
color:red;
padding:0 6px 0 0;
}
ul li{list-style-type:none;font-size:1em;}
<ul>
<li>test1</li>
<li>test</li>
</ul>
Вот демонстрационная ссылка http://jsbin.com/keliguqi/1/
Сделайте некоторые преобразования с буквой L
.checkmark {
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
}
<div class="checkmark">L</div>
Дополнительное решение, если у вас есть только один из следующих: перед /: после доступных псевдоэлементов: : after-Checkbox с использованием границ
В основном он использует свойства border-bottom
и border-right
для создания флажка, а затем поворачивает зеркальный L с помощью transform
Пример
li {
position: relative; /* necessary for positioning the :after */
}
li.done {
list-style: none; /* remove normal bullet for done items */
}
li.done:after {
content: "";
background-color: transparent;
/* position the checkbox */
position: absolute;
left: -16px;
top: 0px;
/* setting the checkbox */
/* short arm */
width: 5px;
border-bottom: 3px solid #4D7C2A;
/* long arm */
height: 11px;
border-right: 3px solid #4D7C2A;
/* rotate the mirrored L to make it a checkbox */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
To do:
<ul>
<li class="done">Great stuff</li>
<li class="done">Easy stuff</li>
<li>Difficult stuff</li>
</ul>
Я предлагаю использовать знак галочки, а не рисовать его. Или используйте веб-сайты, которые бесплатны, например: fontello [dot] com. Вы можете заменить символ галочки символом веб-шрифта.
Списки
ul {padding: 0;}
li {list-style: none}
li:before {
display:inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
content: '✔';
color: #999;
}
Смотрите здесь: http://jsfiddle.net/hpmW7/3/
Флажки
У вас даже есть веб-шрифты с глифовыми символами и анимацией CSS 3. Для IE8 вам нужно применить polyfill, поскольку он не понимает: checked.
input[type="checkbox"] {
clip: rect(1px, 1px, 1px, 1px);
left: -9999px;
position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
content:'';
display:inline-block;
vertical-align: top;
line-height: 1em;
border: 1px solid #999;
border-radius: 0.3em;
width: 1em;
height:1em;
margin-right: 0.3em;
text-align: center;
}
input[type="checkbox"]:checked + label:before {
content: '✔';
color: green;
}
См. скрипт JS: http://jsfiddle.net/VzvFE/37
li:before {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 9px;
margin-left: -15px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
li:after {
content: '';
height: 5px;
background-color: green;
position: relative;
display: block;
top: 50%;
left: 50%;
width: 20px;
margin-left: -11px;
margin-top: -6px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Мне нравится этот способ, потому что вам не нужно создавать два компонента, только один.
.checkmark:after {
opacity: 1;
height: 4em;
width: 2em;
-webkit-transform-origin: left top;
transform-origin: left top;
border-right: 2px solid #5cb85c;
border-top: 2px solid #5cb85c;
content: '';
left: 2em;
top: 4em;
position: absolute;
}
Возможно, вы захотите попробовать fontawesome.io
У него отличная коллекция иконок. Для вас <i class="fa fa-check" aria-hidden="true"></i>
должен работать. В этом тоже много значков проверки. Надеюсь, что это поможет.
Попробуйте этот пример //html
<span>✓</span>
//пример css
span {
content: "\2713";
}
Это простая CSS для Sign Mark.
ul li: after {непрозрачность: 1; содержимое: '\ 2713'; справа: 20px; позиция: абсолютная; размер шрифта: 20px; вес шрифта: полужирный;}