如何在bootstrap中使用带有glyphicon类的图标图像

时间:2015-08-07 12:09:23

标签: twitter-bootstrap-3 asp.net-mvc-5

HI我正在使用mvc 5,它集成了bootstrap类,我必须使用glyphicons作为我的菜单,我想使用我的图标图像作为glyphicon,所以我希望在不影响预定义类引导程序的情况下我也会这样做在bootsrap中使用新创建的css类的图标图像。

1 个答案:

答案 0 :(得分:0)

很难理解你在寻找什么。你应该发布一个例子,但在这里尝试和帮助。

来自Bootstrap网站:

  

不要与其他组件混合图标类不能直接使用   与其他组件相结合。它们不应该一起使用   同一元素上的其他类。相反,添加嵌套并应用   图标类到。

     

仅用于空元素仅应使用图标类   不包含文本内容且没有子元素的元素。

正确使用:

<a href="@Url.Action("Action", "Controller")" class="btn btn-warning">
    link text 
    <span class="glyphicon glyphicon-plus-sign"/>
</a>

如果你想使用除Bootstraps之外的自定义css类,那么创建一个新的所有类的css文件,甚至是你想要从引导程序覆盖的类,然后将该css文件加载到位于App_Start的bundle文件中目录。如下图所示。

public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/YOURCUSTOMCSSGOESHERE.css  
                          ));
        }
    }