标签: glyphicons

我正在从bootstrap 2.3迁移到bootstrap 3,一切运行良好.但是当我尝试添加一些图标时,图标字体无法正常显示.我试图在这里查看http://bootply.com/61521并且只显示'.glyphicon-envelope'.其他人则显示为"E001"等.

我怎样才能解决这个问题？

对于其他浏览器,glyphicons正确显示,只有firefox无法正确显示它.

我一直在寻找一个很好的解释如何添加glyphicons到rails link_to和button_to帮助器,但我发现很少.到目前为止我收集的内容让我想到了这个:

<li>
  <%= link_to deals_path, class: "btn btn-default" do %>
    <%= content_tag(:i, "Dasboard",:class=>' glyphicon, glyphicon-th-large') -%>
  <% end %>
</li>

这不起作用,我认为我发现的一个例子来自Bootstrap 2.有人能指出我这方面的好资源,还是提供一个快速的例子？提前致谢!

如何在标题栏中添加图像？

我有头衔 - "Webnet"

将其与FontAwesome Glyphicon的图标图像合并为 -

<title><i class="icon-user icon-black"></i>Webnet</title>

我尝试用图像源替换它 -

<title><img src="assests/img/user-Hermosillo.png" ></img>Webnet</title>

但标题显示innerHTML而不是在那里显示图像.

有帮助吗？

我现在正在使用Twitter Bootstrap 3 RC2以及已经移入单独存储库的Twitter Bootstrap.我注意到,如果在带有文本的按钮中使用图标不能很好地居中:

图标和文字有相同的底线,但我相信一个好看的按钮图标应该根据文本居中,不应该吗？知道怎么做到这一点？

http://bootply.com/74652

我知道一些CSS和HTML的基础知识,有时也会使用它们,但我不是专业人士,而且我很好奇Bootstrap Glyphicons是如何工作的.我的意思是Bootstrap zip文件中没有图像,所以图像来自哪里？

如何更改HTML列表中的项目符号并使用Bootstrap 3附带的glyphicons？

以便:

<ul>
    <li>...</li>
    <li>...</li>
</ul>

显示为:

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

 [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
         omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
         tempora incidunt ut labore.

我宁愿不要注入额外的HTML这样的......

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>

有没有办法翻转glyphicon.我发现Flip a Image css技巧,但这对glyphicon不起作用.请提出任何建议

这是关于Bootstrap 3.0.我希望图标/ glyphicon在崩溃时更改.即,从封闭的文件夹到打开的文件夹.

我已经进行了广泛的搜索,并且在这里阅读了线程,但无济于事.这个帖子很接近,基本上就是我想要的.如何在Bootstrap 3中使其工作？

我正在ASP.NET MVC 4中的一个项目,我做了以下步骤:

1. 从http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/下载的twitter bootstrap

2. 将字体文件的构建操作设置为内容(文件位于〜/ Content/font文件夹中)

   glyphicons-halflings-regular.eot
   glyphicons-halflings-regular.svg
   glyphicons-halflings-regular.ttf
   glyphicons-halflings-regular.woff
   

   Run Code Online (Sandbox Code Playgroud)

3. 添加到RouteConfig.cs

   routes.IgnoreRoute("{folder}/{*pathInfo}",new {folder ="Content"});

4. 向Web.config添加了以下元素

   <?xml version="1.0" encoding="UTF-8"?>
   <system.webServer>
      <staticContent>
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".otf"/>
          <remove fileExtension=".woff"/>
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
          <mimeMap fileExtension=".otf" mimeType="font/otf" />
         <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      </staticContent>
   </system.webServer>
   

   Run Code Online (Sandbox Code Playgroud)

5. 包含在BundleConfig.cs中的以下代码

   bundles.Add(new StyleBundle("~/bundles/maincss")
                       .Include("~/Content/bootstrap/bootstrap.css")
                       .Include("~/Content/bootstrap/bootstrap-theme.css")
                       .Include("~/Content/hbl-full.css"));
   

   Run Code Online (Sandbox Code Playgroud)

   还尝试使用以下代码

   IItemTransform cssFixer = new CssRewriteUrlTransform();
   
   bundles.Add(new StyleBundle("~/bundles/maincss")
                       .Include("~/Content/bootstrap/bootstrap.css", cssFixer)
                       .Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
                       .Include("~/Content/hbl-full.css", cssFixer));
   

   Run Code Online (Sandbox Code Playgroud)

6. 在主Layout.cshtml中调用

   @ Styles.Render( "〜/捆绑/ maincss")

仍然在localhost图标正常显示,但当我推送代码发布服务器时,我只能看到方形而不是图标,在Chrome的控制台选项卡中我得到

获取http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404(未找到)测试:1 …

不确定这是否可能,我试图在输入组内的glyphicon上调用工具提示,我的代码(不起作用)是;

<div class="input-group">
<input type="text" class="form-control" name="security" id="security"><span class="input-group-addon"><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container: 'body' title="" data-original-title="Security Code"></span></span>
</div>

我正在使用Bootstrap 3和最新版本的jQuery.