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

Question

我是 SCSS 的新手，我正在尝试添加一个带有 font-awesome 作为内容的新变量，以获取具有 "icon" 背景的输入 html 元素，例如：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

你可以只使用按钮类型="submit"而不是输入

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

来源：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，您需要定位它们的容器，bootstrap3 使用 '.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 作为内容的自定义 bootstrap 变量

Custom bootstrap variable using font-awesome as content

sass

twitter-bootstrap

font-awesome