Question

我想在我的按钮上添加一个fontawesome手机符号，但由于某种原因，它似乎在我的跨度之前没有用，只是显示了一个正方形。

我确定我已经正确设置了它，我在按钮外面进行了测试，它显示在那里（见屏幕截图）。我们正在为css使用scss结构。

<template>
    <div class="page-wrapper">
        <main>
            <div class="elements-wrapper">
                <h2 class="headline">{{ headline }}</h2>
                <h3 class="subtitle">{{ subtitle }}</h3>
                <slotButton class="button-one">
                    <a href="#"><span>Button 1</span></a>
                </slotButton>
                <slotButton class="button-two">
                    <a href="#"><span>Button 2</span></a>
                </slotButton>
                <br>
                <i class="fas fa-phone"></i>
            </div>
        </main>
    </div>
</template>

<script>
    import slotButton from '@/components/SlotButton';

    export default {
        name: 'thank-you',
        components: {
            slotButton,
        },
        data() {
            return {
                headline: 'Headline',
                subtitle: 'Subtitle',
            };
        },
    };
</script>

<style lang='scss'>


/* - Small devices (landscape phones, 576px and up) - */

.page-wrapper{
    background: linear-gradient(164.1deg, #FF7840 0%, #FF1979 100%);
    display: grid;
    grid-template-columns: 1fr;
    padding: 1.5rem;
    height: 100%;
    width: 100%;
    grid-template-areas:
    "headerBarThankYou"
    "main";
    grid-template-rows: 10vh auto;

    main{
        .elements-wrapper{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas:
            "headline"
            "subtitle"
            "buttonOne"
            "buttonTwo"
            padding: 1rem;
            grid-gap: 0.5rem;
            justify-items: start;

            button{
                a{
                    position: relative;
                    padding-left: 1rem;
                    font-family: 'Nunito Sans', sans-serif;
                    text-align: left;
                    background-color: $white;
                    max-width: 20rem;
                    width: 450px;
                    span{
                        font-size: 18px;
                        bottom-margin: 100px;
                        background: linear-gradient(164.1deg, #FF7840 0%, #FF1979 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        min-width: 12.5rem;
                        &:before{
                            content: '\f095';
                            font-family: "FontAwesome";
                        }
                    }
                }
                .button-one{
                  grid-area: buttonOne;
                }
                .button-two{
                  grid-area: buttonTwo;
                }
            }

            .headline{
                color: $white;
                @include font-size(26);
                text-align: left;
                grid-area: headline;
            }
            .subtitle{
                color: $white;
                @include font-size(22);
                grid-area: subtitle;
            }
        }
    }
}

    .header-bar-wrapper{
        justify-self: start;
        .company-logo{
            width: 119px;
            margin: 0.5rem auto;
        }
    }
</style>

我试图谷歌一个解决方案，似乎webawesome 4与版本5略有不同，他们有一些像内容和字体系列所需的css属性设置，但环顾四周看起来似乎与所需的不一致

Answer 1

我设法搞清楚了。我的父组件在其中有一些样式，使其不可见。不管怎样，谢谢

在组件按钮Vue.js中的文本之前添加awesomefont符号

1 个答案: