Пользовательская переменная начальной загрузки, использующая font-awesome в качестве содержимого

Я новичок в SCSS, и я пытаюсь добавить новую переменную с font-awesome в качестве содержимого, чтобы получить элемент ввода html с фоном "icon", например thoses: http://v4-alpha.getbootstrap.com/components/forms/

Кодовый блок 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;

Как мне написать свой код, чтобы получить ввод со значком шрифта в качестве фона?

Источник

2 ответа

Решение

В начальной загрузке 4 переменные $form-icon-* определяют svg, используемый в качестве фонового изображения, в то время как font-awesome достигает его рендеринга, используя псевдоконтент (фактическая текстовая строка), отформатированный с использованием их шрифта.

Чтобы добиться того, чего вы хотите, вам придется переопределить загрузчик, чтобы он не использовал фоновое изображение, и добавьте ваш шрифт в качестве псевдоконтента.

Так, например, переопределить следующую загрузку по умолчанию из начальной загрузки:

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

самый простой способ в sass будет что-то вроде:

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

Однако входные теги не поддерживают псевдоконтент, поэтому чтобы использовать в них font-awesome, вам нужно нацелиться на их контейнер, используйте загрузчик 3, чтобы обернуть их контейнером ".form-group" или ".input-group", поэтому я используйте это для использования font-awesome при проверке ввода:

.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;
        }
    }
}
Источник

Вы можете просто использовать кнопку type="submit", а не вводить

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

источник: Q11686007

Источник
Другие вопросы по тегам