0

I am new to SCSS and I am trying to add a new variable with font-awesome as content to get an input html element with "icon" background like thoses : http://v4-alpha.getbootstrap.com/components/forms/#validation

The scss code-block for thoses input are :

// 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;

I tested some code without success due to my knowledge: $form-icon-shopping-cart is the new variable I want to set. 

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

How I should write my code to get an input with a font-awesome icon as background ?

flydev
  • 4,327
  • 2
  • 31
  • 36

2 Answers2

0

you could just use button type="submit" and not input

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

src : Q11686007

Paul Lemarchand
  • 2,068
  • 1
  • 15
  • 27
0

In bootstrap 4, the $form-icon-* variables defines an svg used as background image while font-awesome achieves its rendering using pseudo content (actual text string) formatted with their font.

To achieve what you want, you'll have to override bootstrap to prevent it from using a background image and add your font as pseudo content.

So for example to override the following default from bootstrap:

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

the easiest way in sass would be something like:

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

However input tags do not support pseudo content, therefore to use font-awesome in them you'll need to target their container, bootstrap 3 use to wrap them with '.form-group' or '.input-group' container, so I use this for using font-awesome in input validation:

.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;
        }
    }
}
Ninowis
  • 379
  • 1
  • 8