.form-check{ display: flex; align-items:center; padding: 0; text-align: left; min-width: 50px; input[type=checkbox],input[type=radio] { position: relative; width: 16px; height: 16px; flex:0 0 16px; margin: 0 5px 0 0; cursor: pointer; &:after { display: inline-block; position: absolute; width: 16px; height: 16px; font-family: "Font Awesome 5 Pro"; font-size: 12px; line-height: 14px; color:#fff; background-color: #fff; border: 1px #b4d26c solid; text-align:center; } &:disabled{ opacity: 0.5; } } input[type=checkbox]{ &:after { content: "\f00c"; border-radius: 2px; } &:checked:after { color:#fff; background-color:#b4d26c; font-weight: 500; } } input[type=radio]{ &:after { content: "\f111"; border-radius: 50%; } &:checked:after { color:#b4d26c; font-weight: bold; } &.cube{ &:after { content: "\f00c"; border-radius: 2px; } &:checked:after { color:#fff; background-color:#b4d26c; } } } }