web-dev-qa-db-ja.com

Font Awesome 5アイコン付きのチェックボックス

フォントの素晴らしい5つのアイコンを含むチェックボックスを既に設計した人はいませんか？

私はすでにそれをグーグルで検索し、FA-4の例だけを見つけました http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

FA5に更新し、CSS擬似要素を使用して他のことを実行しましたが、チェックボックス内では実行されていません。私は、擬似要素のない他のソリューションを受け入れています。

前もって感謝します！

フィドルの例：

FA-4.7で調整

/* Checkboxes */

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label {
  padding-left: 0;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-family: "FontAwesome";
}

.checkbox input[type="checkbox"]:checked+label::before {
  content: "\f00c";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="checkbox">
  <input type="checkbox" id="profile_notifications" value="" checked/>
  <label for="profile_notifications">
    I agree
  </label>
</div>

FA-5をいじる

/* Checkboxes */

.checkbox {
  padding-left: 10px;
  padding-top: 10px;
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label {
  padding-left: 0;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-family: "Font Awesome 5 Solid";
  
}

.checkbox input[type="checkbox"]:checked+label::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}

.test {
  padding-left: 10px;
  padding-top: 10px;
}
.test .pseudo-element:before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<script>
    window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

<div class="checkbox">
  <input type="checkbox" id="profile_notifications" value="" checked/>
  <label for="profile_notifications">
    Doesn't work!
  </label>
</div>

<div class="test">
  <label class="pseudo-element">This works!</label>
</div>
cssfont-awesomepseudo-elementfont-awesome-5
7
markus_Redmine

Font Awesome 5アイコンをチェックボックスとして使用する

フォントの太さを変更するだけです。

input[type='checkbox'] {display:none;}
input[type='checkbox'] + label:before {
  font-family: 'Font Awesome 5 Free';
  display: inline-block;
}
/* unchecked */
input[type='checkbox'] + label:before { 
  content: "\f00c";
  font-weight:100;
}
/* checked */
input[type='checkbox']:checked + label:before {font-weight:900;}
3
andyJK

上記は私にはうまくいきませんでした。私はBootstrap 3.3.7（bootstrap 3.4.0でもテスト済み）およびfont awesome 5.5.0 freeを使用しています。これを私のカスタムCSSファイルに：

/* To get rid of the original and the benefit of not having the blue outline on focus */
input[type='checkbox'], input[type='radio'] {
    display:none;
}
.checkbox input[type='checkbox'] + label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    color: #fff;
}
/* font weight is the only important one. The size and padding makes it look nicer */
.checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 3px;
    padding-top: 0px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    content: "";
}

編集：この種のチェックボックスを.input-group-addonチェックボックスの周囲のマージンと、checkbox :: before内のパディングが少しずれています。だから私はこれを使用します：

.input-group-addon .checkbox, .input-group-addon .radio {
    margin-top: 0px;
    margin-bottom: 0px;
}
.input-group-addon .checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 2px;
    padding-top: 2px;
}
2
MarcM

素晴らしい4〜5のコードフォントを改良した後、既存のプロジェクトでも、すばらしいフォントがなくなったチェックボックスUIスタイルなどの小さな変更に苦労しています。 R＆Dとコードのチェックを行った後、フォントawesome 5でチェックボックスを切り替えるための簡単な手順を示します。

チェック用にフォントの太さを追加するだけ

CSS 1.表示する入力タイプのチェックボックス/ラジオを作成：なし。
2。 cssでクラスの前または後にラベルを追加し、フォントファミリを「font-family： 'font awesome 5 free';」として参照します。 css "content："\f004 ";"でコンテンツタイプを指定します。3.チェック済みステータスには、600以上のフォントウェイトを適用します

HTML 1.チェックボックスの後にラベルを配置し、チェックボックスIDを参照します。

  .wishChkBox  input[type='checkbox'] {
    display:none;
}
 .wishChkBox   input[type='checkbox']+ label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f004";
        font-size:1.5rem;
        cursor:pointer;
 
 }
 .wishChkBox  input[type='checkbox']:checked + label:before {
     font-weight:600;
 
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
 <div class="wishChkBox">
 
            <input type="checkbox" id="wish1" name="wish1"  />
            <label for="wish1"> </label>
          </div>
0
surya ramakanth