カスタムブートストラップ変数は、コンテンツ

Question

ように私はSCSSに新しいですし、私はthosesのような「アイコン」の背景に入力html要素を取得するためのコンテンツとしてフォント素晴らしいと新しい変数を追加しようとしています：http://v4-alpha.getbootstrap.com/components/forms/#validation

thoses入力用SCSSコードブロックは、次のとおりです。

// Form validation icons 
$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default; 
$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default; 
$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !default; 

は私が原因私の知識に成功せず、いくつかのコードをテストした： $form-icon-shopping-cartは、私が設定する新しい変数です。

$form-icon-shopping-cart: $fa-var-shopping-cart; 

背景としてフォントの素晴らしいアイコンを入力するためにコードを書く必要がありますか？あなただけ= "提出" と入力しないボタンタイプを使用することができ

Answer 1

は、$フォーム-icon- *変数は、背景画像として使用SVGを定義しますfont-awesomeはそのフォントでフォーマットされた擬似コンテンツ（実際のテキスト文字列）を使ってレンダリングを実現します。

目的を達成するには、バックグラウンドイメージを使用してフォントを擬似コンテンツとして追加しないように、ブートストラップを無効にする必要があります。 SASSで最も簡単な方法は、のようなものになるだろう

.form-control-success { 
    background-image: url($form-icon-success); 
} 

：ブートストラップから、次のデフォルトを上書きするために例えばので

.form-control-success { 
    background-image: none; 
    &:before { 
     @include fa-icon(); 
     content: $fa-var-yourFaVarName; 
    } 
} 

しかしinputタグがすることは、擬似的なコンテンツをサポートしていません。あなたのコンテナをターゲットにする必要があるそれらの中で素晴らしいフォントを使用してください。ブートストラップ3は '.form-group'または '.input-group'コンテナでそれらをラップするために使用します。

.form-group, 
.input-group { 
    position:relative; 

    &:after { 
     font-family: 'FontAwesome'; 
     position:absolute; 
     left:100%; 
     margin-left:-24px; 
     top: 0; 
     margin-top: 32px; 
     z-index: 2; 
    }  

    &.error {  

     &:after { 
      content: $fa-var-remove; 
      color: $brand-danger; 
     } 
    }  

    &.valid {  

     &:after { 
      content: $fa-var-check; 
      color: $brand-success; 
     } 
    } 
} 

Answer 2

SRC

<button type="submit" class="btn btn-success"> 
    <i class="icon-circle-arrow-right icon-large"></i> Next 
</button> 

：ブートストラップ4ではQ11686007