问图标被动画取代？&？
EN

Stack Overflow用户

提问于 2018-07-01 21:24:59

回答 1查看 164关注 0票数 0

设置: Asp.Net Mvc 5+ Bootstrap 3+ FontAwesome 5 Pro JS+SVG all.js (无shims)

Code/layout.cshtml:

<head>  
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

    <!-- Add local styles, mostly for plugins css file -->
    @if (IsSectionDefined("Styles"))
    {
        @RenderSection("Styles", required: false)
    }

    <!-- Primary Inspinia style -->
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/plugins/kendo/css")

    <!-- Section for main scripts render -->
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/kendo")
    <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" data-auto-replace-svg="nest"></script>
    @*<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" ></script>*@
</head>

所以，我不进行捆绑，因为我知道需要添加属性数据--自动替换-svg=“nest”。我已经尝试过了，不管有没有属性。我还设法将所有图标从FA4转换为FA5，并且不再使用shims。我已经验证了我的包，以及任何可能的FA4爬行。

使用：

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="side-menu">
            <li class="@Html.IsSelected(controller: "Dashboards")">
                <a href="@Url.Action("Primary", "Dashboards")"><i class="far fa-th-large fa-fw"></i><span class="nav-label" data-i18n="nav.dashboard">Dashboards</span> <span class="far fa-angle-down arrow"></span></a>
                <ul class="nav nav-second-level collapse @Html.IsSelected(controller: "Dashboards", cssClass: "in")">
                    <li class="@Html.IsSelected(action: "Primary")"><a href="@Url.Action("Primary", "Dashboards")"><i class="far fa-tachometer-alt fa-fw"></i>Dashboard</a></li>
                </ul>
            </li>

            <li class="@Html.IsSelected(controller: "Bill")">
                <a href="@Url.Action("Search", "Bill")"><i class="far fa-archive fa-fw"></i><span class="nav-label" data-i18n="nav.bills">Bills</span><span class="far fa-angle-down arrow"></span></a>
                <ul class="nav nav-second-level collapse @Html.IsSelected(controller: "Bill", cssClass: "in")">
                    <li class="@Html.IsSelected(action: "Search")"><a href="@Url.Action("Search", "Bill")"><i class="far fa-search fa-fw"></i>Search</a></li>
                    <li class="@Html.IsSelected(action: "GenerateBillAmin")"><a href="@Url.Action("GenerateBillAmin", "Bill")"><i class="far fa-file-invoice fa-fw"></i>Receipt (Amin)</a></li>
                    <li class="@Html.IsSelected(action: "GenerateBill")"><a href="@Url.Action("GenerateBill", "Bill")"><i class="far fa-file-invoice fa-fw"></i>Receipt (Regular)</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Bundles/CSS:

// CSS style (bootstrap/inspinia)
bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/bootstrap.min.css",
                "~/Content/animate.min.css",
                "~/Content/style.css" ));

// CSS style (kendo)
bundles.Add(new StyleBundle("~/Content/plugins/kendo/css").Include(
                "~/Content/plugins/kendo/kendo.common-material.min.css",
                "~/Content/plugins/kendo/kendo.material.min.css"));

Bundles/JS:

// jQuery
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-3.3.1.min.js"));

// Bootstrap
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                "~/Scripts/bootstrap.min.js"));

// Kendo UI Scripts
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                "~/Scripts/plugins/kendo/kendo.all.min.js",
                "~/Scripts/plugins/kendo/kendo.aspnetmvc.min.js",
                "~/Scripts/plugins/kendo/jszip.min.js"));

最终呈现图标：

<li class="">
    <a href="/focus-web/Deposit/Search">
        <svg class="svg-inline--fa fa-search fa-w-16 fa-fw" aria-hidden="true" data-prefix="far" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
            <g>
                <path fill="currentColor" d="M156.5,447.7l-12.6,29.5c-18.7-9.5-35.9-21.2-51.5-34.9l22.7-22.7C127.6,430.5,141.5,440,156.5,447.7z M40.6,272H8.5 c1.4,21.2,5.4,41.7,11.7,61.1L50,321.2C45.1,305.5,41.8,289,40.6,272z M40.6,240c1.4-18.8,5.2-37,11.1-54.1l-29.5-12.6 C14.7,194.3,10,216.7,8.5,240H40.6z M64.3,156.5c7.8-14.9,17.2-28.8,28.1-41.5L69.7,92.3c-13.7,15.6-25.5,32.8-34.9,51.5 L64.3,156.5z M397,419.6c-13.9,12-29.4,22.3-46.1,30.4l11.9,29.8c20.7-9.9,39.8-22.6,56.9-37.6L397,419.6z M115,92.4 c13.9-12,29.4-22.3,46.1-30.4l-11.9-29.8c-20.7,9.9-39.8,22.6-56.8,37.6L115,92.4z M447.7,355.5c-7.8,14.9-17.2,28.8-28.1,41.5 l22.7,22.7c13.7-15.6,25.5-32.9,34.9-51.5L447.7,355.5z M471.4,272c-1.4,18.8-5.2,37-11.1,54.1l29.5,12.6 c7.5-21.1,12.2-43.5,13.6-66.8H471.4z M321.2,462c-15.7,5-32.2,8.2-49.2,9.4v32.1c21.2-1.4,41.7-5.4,61.1-11.7L321.2,462z M240,471.4c-18.8-1.4-37-5.2-54.1-11.1l-12.6,29.5c21.1,7.5,43.5,12.2,66.8,13.6V471.4z M462,190.8c5,15.7,8.2,32.2,9.4,49.2h32.1 c-1.4-21.2-5.4-41.7-11.7-61.1L462,190.8z M92.4,397c-12-13.9-22.3-29.4-30.4-46.1l-29.8,11.9c9.9,20.7,22.6,39.8,37.6,56.9 L92.4,397z M272,40.6c18.8,1.4,36.9,5.2,54.1,11.1l12.6-29.5C317.7,14.7,295.3,10,272,8.5V40.6z M190.8,50 c15.7-5,32.2-8.2,49.2-9.4V8.5c-21.2,1.4-41.7,5.4-61.1,11.7L190.8,50z M442.3,92.3L419.6,115c12,13.9,22.3,29.4,30.5,46.1 l29.8-11.9C470,128.5,457.3,109.4,442.3,92.3z M397,92.4l22.7-22.7c-15.6-13.7-32.8-25.5-51.5-34.9l-12.6,29.5 C370.4,72.1,384.4,81.5,397,92.4z"/>
                <circle fill="currentColor" cx="256" cy="364" r="26.4191">
                    <animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="r" values="28;14;28;28;14;28;"/>
                    <animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;1;1;0;1;"/>
                </circle>
                <path fill="currentColor" opacity="1" d="M263.7,312h-16c-6.6,0-12-5.4-12-12c0-71,77.4-63.9,77.4-107.8c0-20-17.8-40.2-57.4-40.2c-29.1,0-44.3,9.6-59.2,28.7 c-3.9,5-11.1,6-16.2,2.4l-13.1-9.2c-5.6-3.9-6.9-11.8-2.6-17.2c21.2-27.2,46.4-44.7,91.2-44.7c52.3,0,97.4,29.8,97.4,80.2 c0,67.6-77.4,63.5-77.4,107.8C275.7,306.6,270.3,312,263.7,312z">
                    <animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="1;0;0;0;0;1;"/>
                </path>
                <path fill="currentColor" opacity="0" d="M232.5,134.5l7,168c0.3,6.4,5.6,11.5,12,11.5h9c6.4,0,11.7-5.1,12-11.5l7-168c0.3-6.8-5.2-12.5-12-12.5h-23 C237.7,122,232.2,127.7,232.5,134.5z">
                    <animate attributeType="XML" repeatCount="indefinite" dur="2s" attributeName="opacity" values="0;0;1;1;0;0;"/>
                </path>
            </g>
        </svg>
        <!-- <i class="far fa-search fa-fw"></i> -->Search</a>
</li>

当我用Rant-Repeat:从FA4转到FA5时，一切都很好，所以我不得不使用最新的JS+SVG+Shims。我做了一次成功了。然后我爱上了遥远的偶像。我找到了所有fa* (FA4)的痕迹，并将它们转换为FA5，并删除了shim文件。我不知道当时发生了什么。这些图标从那以后就没用了，我不愿意从JS+SVG回去

asp.net-mvc-5