Question

我是SCSS的新手，我正在尝试使用font-awesome作为内容添加一个新变量，以获取带有＆＃34; icon＆＃34;的输入html元素。背景像thoses：http://v4-alpha.getbootstrap.com/components/forms/#validation

输入的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

你可以使用按钮类型=“提交”而不是输入

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

src：Q11686007

Answer 2

在bootstrap 4中，$ form-icon- *变量定义了一个用作背景图像的svg，而font-awesome使用用其字体格式化的伪内容（实际文本字符串）来实现其渲染。

为了达到你想要的效果，你必须覆盖bootstrap以防止它使用背景图像并将你的字体添加为伪内容。

例如，从bootstrap覆盖以下默认值：

.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，你需要定位他们的容器，bootstrap 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;
        }
    }
}

使用font-awesome作为内容的自定义引导变量

2 个答案: