{{{＃if currentUser}}，当用户注销时，内部图标仍然呈现

Question

感谢您阅读我的信息，这是我的问题：

我正在使用Bulma制造的导航栏，其中使用{{#if currentUser}}显示来自FontAwesome的登录/注册按钮或个人资料图片图标，如下所示（“ S'inscrire”和“ Se connecter”表示用法语注册和登录）：

            <div class="navbar-end">
                <div class="navbar-item">
                    <div class="buttons">
                        {{#if currentUser}}
                            <!-- Displayed only when the user is logged in-->
                            <i class="fas fa-user icon is-large" id="userProfile"></i>
                        {{else}}
                            <!-- Displayed when the user is NOT logged in-->
                            <a class="button is-primary register">
                                <strong>S'inscrire</strong>
                            </a>
                            <a class="button is-light login">Se connecter</a>
                        {{/if}}
                    </div>
                </div>
            </div>

当用户未登录时，仅显示按钮：

并且当他登录时，我只有图标：

我的问题是，当用户注销时，我同时获得了用户图标和按钮：

并且如果我多次登录和注销，我会得到多个图标。看来这是FontAwesome图标的问题，我尝试使用普通图像而不是图标，并且行为正常，但是我需要在应用程序的某些位置的此类语句中使用图标。

提前感谢！

Answer 1

这是因为字体真棒5将<i>标记替换为svg，如果它没有包装在另一个流元素内，则会破坏代码的反应性。尝试用<i>包装<span>，以保持反应性：