图标被动画取代了？ ＆？

时间：2018-07-02 05:24:59

标签： asp.net-mvc-5 font-awesome-5

设置：Asp.Net Mvc 5 + Bootstrap 3 + FontAwesome 5 Pro JS + SVG all.js（无垫片）

代码/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>

因此，我没有进行捆绑，因为我知道需要添加属性data-auto-replace-svg =“ nest”。我试过有和没有属性。我还设法将所有图标从FA4转换为FA5，不再使用垫片。我还对我的捆绑包进行了验证，以了解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>

捆绑/ 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"));

捆绑/ 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>

横行重复： 当我从带有CSS + Shims的FA4切换到FA5时，一切运行得非常好，以至于我不得不使用最新的JS + SVG + Shims。我做到了。然后我爱上了远方的偶像。我找到了所有fa *（FA4）的痕迹，并将它们转换为FA5，并摆脱了填充文件。我不知道那时发生了什么。从那以后这些图标就再也无法使用了，我也不愿意从JS + SVG返回

1 个答案:

答案 0 :(得分：0)

我在GitHub上针对FA提出了类似的问题，并立即被告知其中一个图标仅来自PRO软件包，这使我意识到我正在加载免费的js文件，而不是自定义的个人Pro文件。一旦我根据自己的凭据生成了新的CDN链接，问题就解决了。

相关问题
最新问题