I am trying to write code that mimics this animation as much as possible.
I have been going over keyframe animations & I think that they can be used to do what I need them to do.
I effectively want to have three things happen when the user hovers over the parent element. The first is the color
on the right side of the element will change dynamically (as in the picture & as in the example code), the
icon will animate into the picture & then the text will then animate.
I am new to programming & I am looking for some direction.
Example of finished product: https://imgur.com/a/bxV1V1B
DEMO
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
}
a:hover:after {
width: 15%;
}
<div class="wrapper">
<span>Hover Me!</span>
</div>
Here you go. I made a CSS animation for you which will rotate and translate a new i that I have added into the HTML. I used font awesome for the check with the circle around it. Take a look:
.wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
font-size: 18px;
font-family: sans-serif;
text-decoration: none;
color: #333;
border: 2px solid #333;
letter-spacing: 2px;
text-align: center;
position: relative;
transition: all .35s;
}
a span {
position: relative;
z-index: 2;
}
a:after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 100%;
background: green;
transition: all .35s;
visibility: hidden;
}
a:hover:after {
width: 15%;
visibility: visible;
}
#check {
right: 2px;
top: 8px;
position: absolute;
display: none;
z-index: 3;
transition: right .35s;
}
a:hover #check {
animation:spin .35s linear;
display: block;
}
#keyframes spin {
0% {
transform: translate(25px) rotate(0deg);
}
100% {
transform: translate(0px) rotate(360deg);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="wrapper">
<span>Hover Me!</span><i id="check"style="font-size:22px; color:lightgrey" class="fa fa-check-circle"></i>
</div>
I have already created the modal in css, but when I try changing the transition so that it pops more like a modal instead of fading in, it doesn't work. I've tried changing the duration and the transition type but it doesn't seem to apply. Am I using the wrong transition?
See fiddle: https://jsfiddle.net/mtbh24uL/
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
My goal: to have more of a pop up effect like a real javascript modal. I basically need to create a modal like you see in the following picture. I'm not sure what the best approach is or the best plugin.
You could define a CSS animation for that and call this animation when you are clicking on the button. You can achieve this with adding the following CSS code. This is only an example to give you a rough idea of how your effect could look like. From this point you can even optimize and finetune the animation.
CSS
.overlay:target .popup{
animation: popup 0.7s;
}
#keyframes popup {
0%{
transform: scale(1);
}
50%{
transform: scale(1.4);
}
60%{
transform: scale(1.1);
}
70%{
transform: scale(1.2);
}
80%{
transform: scale(1);
}
90%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
/* transition: all 0.3s ease-out; */
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup:after {
content: '';
position: absolute;
bottom: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent white transparent;
}
.overlay:target .popup {
animation: popup 0.7s;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
60% {
transform: scale(1.1);
}
70% {
transform: scale(1.2);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
In answer to getting the curved arrow, you can use the :after or :before pseudo element. Something like this will achieve the desired effect:
CSS
.popup:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-left: 24px solid white;
border-radius: 33px 0;
top: -18px;
left: 20px;
width: 30px;
height: 34px;
}
Is there any way to create an arrow like that in the following button, using CSS?
I know how to create triangle-like arrows like this
#triangle_arrow {
top: 3pt;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid black;
border-top: 0.1em solid black;
transform: rotate(45deg);
}
but that line towards the arrow's corner is confusing me!
Fortunately for you, the → HTML entity exists, meaning you don't need to faff around with CSS triangles and instead can simply use content within a pseudo-element:
button {
background: #0898b8;
border: 1px solid #0898b8;
color: white;
line-height: 24px;
padding: 6px 12px;
}
span::after {
content: '→';
font-size: 18px;
margin-left: 4px;
}
<button>
<span>Next</span>
</button>
Already there is way through which you could achieve this i.e. suggested by James, but you could even do this using pseudo selectors or using pre-defined icons using font awesome to get an arrow icon next to some tag, as below.
Solution 1:
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box:before{
top: 20px;
right:10px;
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 0.1em solid white;
border-top: 0.1em solid white;
transform: rotate(45deg);
position:absolute;
}
#box > p:after{
content:'';
width:20px;
height:1px;
background:white;
right:10px;
top:24px;
position:absolute;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
<div id="box">
<p>Next</p>
</div>
Solution 2 :
#box{
width:100px;
height:50px;
background:blue;
position:relative;
}
#box > p{
font-size:24px;
color:#fff;
padding:10px;
box-sizing:border-box;
}
#box > p > .fa{
color:#fff;
font-size:16px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>
Resizeable CSS-only arrow.
https://codepen.io/ArtZ91/pen/jjbOvG
<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>
.css-arrow {
position: relative;
zoom: 1;
&:before {
box-sizing: border-box;
content: "";
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 1px;
bottom: 0;
width: 1px;
background: #000;
zoom: 2;
}
&:after {
box-sizing: content-box;
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 57%;
height: 0;
padding-bottom: 57%;
border: 1px solid #000;
border-width: 1px 0 0 1px;
transform: translate(0, 0) rotate(45deg);
transform-origin: 0% 0%;
border-radius: 0;
zoom: 2;
}
&.right {
transform: rotate(90deg);
}
&.bottom {
transform: rotate(180deg);
}
&.left {
transform: rotate(270deg);
}
}
I want to recreate this icon using css pseudo elements (as a toggle indicator):
I have created the nececcary pseudo elements using ::after, ::before and tried to rotate them using transform: rotate(90deg).
How can I tell them to rotate around their own center? I have tried transform-origin: 50% 50%; which does not work. Right now, both pseudo elements got the same right: 10px; but they are not placed above each other, instead they are next to each other.
You can check this JS FIDDLE to illustrate the problem.
First you can use :before and :after pseudo elements and create shape like this DEMO
After that you can rotate parent element for 45deg and get desired result.
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
<div class="el"></div>
Update: You can also add some transition on :hover like this
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
cursor: pointer;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
transition: all 0.3s ease-in;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
.el:hover:before {
top: -15px;
left: -15px;
}
.el:hover:after {
top: 15px;
left: 15px;
}
<div class="el"></div>
transform-origin works fine, it's just that
a) 50% 50% (the object's center) is the default, and
b) you have to center the content of the box. That's a bit tricky because the icon you use doesn't require the full line height. Try adding
::before, ::after {
padding-bottom: .17em;
}
modify the style of #pseudo::after as right: 0;
#div {
background: blue;
width: 80px;
height: 80px;
transform: rotate(45deg);
}
/* tested but not working */
#pseudo::after,
#pseudo::before {
/* transform-origin: 50% 50%; */
}
#pseudo::after {
content: '›';
font-size: 50px;
color: green;
right: 0;
position: absolute;
transform: rotate(90deg);
top: 40px;
}
#pseudo::before {
content: '›';
font-size: 50px;
position: absolute;
color: green;
right: 10px;
top: 10px;
transform: rotate(-90deg);
}
<div id="div"></div>
<div id="pseudo"></div>
How to draw the tick symbol using CSS? The symbols I find using Unicode isn't aesthetically-pleasing.
EDIT
Icon fonts are a great suggestion. I was looking for something like this.
You can draw two rectangles and place them next to each other. And then rotate by 45 degrees. Modify the width/height/top/left parameters for any variation.
DEMO 1
.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;
}
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
DEMO 2 (With circle)
.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_circle {
position: absolute;
width: 22px;
height: 22px;
background-color: green;
border-radius: 11px;
left: 0;
top: 0;
}
.checkmark_stem {
position: absolute;
width: 3px;
height: 9px;
background-color: #fff;
left: 11px;
top: 6px;
}
.checkmark_kick {
position: absolute;
width: 3px;
height: 3px;
background-color: #fff;
left: 8px;
top: 12px;
}
<span class="checkmark">
<div class="checkmark_circle"></div>
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
Here is another CSS solution. It takes fewer lines of code.
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>
Do some transforms with the letter 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>
only css, quite simple I find it:
.checkmark {
display: inline-block;
transform: rotate(45deg);
height: 25px;
width: 12px;
margin-left: 60%;
border-bottom: 7px solid #78b13f;
border-right: 7px solid #78b13f;
}
<div class="checkmark"></div>
You can now include web fonts and even shrink down the file size with just the glyphs you need.
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;
}
An additional solution, for when you only have one of the :before / :after psuedo-elements available, is described here: :after-Checkbox using borders
It basically uses the border-bottom and border-right properties to create the checkbox, and then rotates the mirrored L using transform
Example
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>
I've used something similar to BM2ilabs's answer in the past to style the tick in checkboxes. This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements.
Simple, semantic, without any dependencies or additional HTML.
label {
cursor: pointer;
}
input[type="checkbox"] {
position: relative;
top: 2px;
box-sizing: content-box;
width: 14px;
height: 14px;
margin: 0 5px 0 0;
cursor: pointer;
-webkit-appearance: none;
border-radius: 2px;
background-color: #fff;
border: 1px solid #b7b7b7;
}
input[type="checkbox"]:before {
content: '';
display: block;
transition: transform 200ms;
}
input[type="checkbox"]:checked:before {
width: 4px;
height: 9px;
margin: 0px 4px;
border-bottom: 2px solid #115c80;
border-right: 2px solid #115c80;
transform: rotate(45deg);
}
<label>
<input type="checkbox" name="check-1" value="Label">Label
</label>
Try this
// html example
<span>✓</span>
// css example
span {
content: "\2713";
}
i like this way because you don't need to create two components just one.
.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;
}
Animation from Scott Galloway Pen
$('#toggle').click(function() {
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
});
body {
padding: 5em;
text-align: center;
}
h1 {
margin-bottom: 1em;
}
.circle-loader {
margin-bottom: 3.5em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-left-color: #5cb85c;
animation: loader-spin 1.2s infinite linear;
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 7em;
height: 7em;
}
.load-complete {
-webkit-animation: none;
animation: none;
border-color: #5cb85c;
transition: border 500ms ease-out;
}
.checkmark {
display: none;
}
.checkmark.draw:after {
animation-duration: 800ms;
animation-timing-function: ease;
animation-name: checkmark;
transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
opacity: 1;
height: 3.5em;
width: 1.75em;
transform-origin: left top;
border-right: 3px solid #5cb85c;
border-top: 3px solid #5cb85c;
content: '';
left: 1.75em;
top: 3.5em;
position: absolute;
}
#keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes checkmark {
0% {
height: 0;
width: 0;
opacity: 1;
}
20% {
height: 0;
width: 1.75em;
opacity: 1;
}
40% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
100% {
height: 3.5em;
width: 1.75em;
opacity: 1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>
<div class="circle-loader">
<div class="checkmark draw"></div>
</div>
<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>
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);
}
After some changing to above Henry's answer, I got a tick with in a circle, I came here looking for that, so adding my code here.
.snackbar_circle {
background-color: #f0f0f0;
border-radius: 13px;
padding: 0 5px;
}
.checkmark {
font-family: arial;
font-weight: bold;
-ms-transform: scaleX(-1) rotate(-35deg);
-webkit-transform: scaleX(-1) rotate(-35deg);
transform: scaleX(-1) rotate(-35deg);
color: #63BA3D;
display: inline-block;
}
<span class="snackbar_circle">
<span class="checkmark">L</span>
</span>
I suggest to use a tick symbol not draw it. Or use webfonts which are free for example: fontello[dot]com You can than replace the tick symbol with a web font glyph.
Lists
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;
}
body {
font-size: 75%;
}
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;
}
<ul>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>
Checkboxes
You even have web fonts with tick symbol glyphs and CSS 3 animations. For IE8 you would need to apply a polyfill since it does not understand :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;
}
body {
font-size: 75%;
}
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;
}
<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>
You might want to try fontawesome.io
It has great collection of icons. For you <i class="fa fa-check" aria-hidden="true"></i> should work. There are many check icons in this too. Hope it helps.
We can use CSS pseudo-element to make the checkmark/tick sign. Suppose, we have a span tag in our HTML and we want to place out checkmark before the span. We can simply do this:
<span class="check_text">Some Text</span>
Now, we can add the CSS like this:
span.check_text:before {
position: absolute;
height: 15px;
width: 5px;
border-bottom: 3px solid red;
border-right: 3px solid red;
content: "";
transform: rotate(45deg);
left: -25px;
top: 2px;
}
If you want a tick, you probably also want a cross, with background colours.
.icon {
display: inline-block;
width: 22px; height: 22px;
border-radius: 50%;
transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success { background: green; }
.icon.icon-success:before { width: 3px; height: 9px; top: 6px; left: 11px; }
.icon.icon-success:after { width: 3px; height: 3px; top: 12px; left: 8px; }
.icon.icon-failure { background: lightcoral; }
.icon.icon-failure::before { width: 3px; height: 12px; top: 5px; left: 10px; }
.icon.icon-failure::after { width: 12px; height: 3px; top: 10px; left: 5px; }
<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>
This is my variant for making 'checked' buttons
function clickMe(data) {
data.classList.add("checked");
}
.unchecked::before {
content: "C";
}
.unchecked {
border-radius: 50%;
outline: none;
}
.checked::before {
content: "L";
}
.checked {
background-color: green;
transform: rotate(45deg) scaleX(-1);
}
<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>
Also, using the awesome font, you can use the following tag.
Simple and beautiful
With the possibility of changing the size and color and other features in CSS
See result:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>fa fa-check-circle</h1>
<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>
<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>
<p>Unicode:</p>
<i style="font-size:24px" class="fa"></i>
This is simple css for Sign Mark.
ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}