程序员经验分享-hwhale

字体真棒图标在 Chrome 中显示为正方形？

2024-02-08

我正在尝试在按钮中使用字体很棒的图标。该图标在 Firefox 中工作正常，但当我在 Chrome 中使用它时，它显示为正方形。我环顾四周，唯一发现的是字体的路径可能不正确，但我后来尝试了 cdn 版本here http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome它仍然可以在 Firefox 中运行，但不能在 Chrome 中运行。

我也在我的计算机上的静态 html 文件中尝试了相同的样式表，它工作正常。

这是正在使用的 html 的示例：

<a id="btnLogin" href="url.com" class="btn btn-primary btn-large disabled">
    <i class="icon-refresh icon-white"></i> 
    Sign in using Facebook
</a>

该 Web 应用程序也是使用 Rails 构建的，并使用 Bootstrap 作为模板。

关于可能导致此问题的任何想法？


我遇到过同样的问题。但我很容易就把它修好了。

在 Font Awesome 字体文件中必须放置在“fonts“目录而不是”font” 以前版本中的目录。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

twitterbootstrap

fontawesome

字体真棒图标在 Chrome 中显示为正方形？ 的相关文章

  • Bootstrap，将带标签的输入与不带标签的按钮对齐，垂直形式/非水平形式

    我想使用 bootstrap v3 和默认表单 表单的垂直布局 而不是水平布局 将输入与标签对齐 与没有标签的按钮对齐 期望的效果 http screencast com t b2uwBopW9rW http screencast com

  • 在 Rails App 中实现 WrapBootstrap 主题

    我刚刚购买了一个 wrapbootstrap 主题 并尝试将其插入我的 Rails 应用程序中 一些 css 如填充 导航栏 字形图标 和大多数 javascript 无法正常运行 我将所有样式表和 javascript 分别复制到 ass

  • Twitter 的 Bootstrap 弹出窗口不起作用

    我正在使用 Bootstrap 的 popover 插件 link http twitter github com bootstrap javascript html twipsy 但它不起作用 HTML a class danger hr

  • Bootstrap 按钮的检查状态

    我想在 Bootstrap 3 0 2 中设置组复选框的选中状态 docs http getbootstrap com javascript buttons html div class btn group div

  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从

  • Sass::SyntaxError：找不到或无法读取要导入的文件：bootstrap-sprockets

    我在开发和生产部署中突然遇到此错误 自定义 css scss import bootstrap sprockets import bootstrap 错误 生产中 rake aborted Sass SyntaxError File to

  • twitter bootstrap css 在 chrome 扩展中发生冲突

    我正在使用 bootstrap 来编写我正在编写的 chrome 扩展 当作为内容脚本导入时 CSS 似乎与我正在查看的许多网站发生冲突 即使在谷歌搜索结果页面中 想知道我是否可以做些什么来将其范围限制为我使用内容脚本注入的 dom 元素

  • 在IOS中，引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div

  • 需要禁用引导时间选择器的输入

    我正在使用 Bootstrap 时间选择器 我已经成功实施了 但我需要的是用户只能在 30 分钟间隙内插入 例如 10 00 10 30 11 00 等 为此我尝试过的是minuteStep如下图所示 效果完美 fantasyleague

  • 使用 bootstrap 将并排的网格位置交换到顶部和底部

    我有两个 div 内容和图像 它们在中等屏幕中并排放置 col md 6 内容 col md 4 图片 因此 当屏幕尺寸更改为小屏幕和 xs 屏幕时 这些 div 不应该并排放置 它们应该像这样顶部和底部对齐 image content 这

  • Laravel 中 Twitter Bootstrap 导航的自动活动类

    和大多数人一样 我正在使用 Twitter Bootstrap 来构建我目前在 Laravel 中开发的网站 到目前为止 我很喜欢使用 Laravel 作为与 Rails 相当的 PHP 但我想知道是否有更好的方法来制作导航栏 我试图确保我

  • Angular 4：Bootstrap 的折叠无法使用 data-target 属性

    我对 Angular 4 使用 Angular CLI 还是个新手 我不知何故无法完成简单的 Bootstrap Collapse 工作 以下是我的崩溃代码 div class panel panel default div class p

  • Bootstrap - 为反向行模式创建移动自适应

    我想用 Bootstrap 创建一个反向效果 第一行 左边是文字 右边是图像 第二行 左边是图片 右边是文字 第三行 左边是文字 右边是图片 第四行 左边是图片 右边是文字 而且这种情况一直持续下去 它在大型设备上看起来非常漂亮 但当它在设

  • Font-Awesome 添加了 aria-hidden 属性，可防止图标出现在浏览器中 [SSR]

    我想在我的 Next js 项目中包含一些 Font Awesome 图标 我已经添加了需要的 标记到我的头部 然后 i i 标记到我的渲染方法 如果我在浏览器中打开该网站 它会向我发出以下控制台警告 index js 1 警告 来自服务器

  • Bootstrap Typeahead 仅显示第一个字母

    我很难让 Twitter Bootstrap 的 Typeahead 正常工作 Typeahead 仅匹配输入的第一个字母 我在预输入框中的结果看起来像 n n n N N n 我的代码是 有人可以帮忙吗 检查 html 中输出的数据源属性

  • 在 Bootstrap 3 中的工具提示中添加换行符

    我正在使用 Bootstrap 3 并向我的 div 添加了一个工具提示 我尝试过使用 n 和 创建新行 Bootstrap 会阻止我吗 div class content show tooltip 你需要添加data html true

  • 使用 grunt 编译具有不同变量的 LESS

    我有基于 Bootstrap 的 HTML 模板 有不同的颜色 红色 绿色等 颜色正在改变使用 brand变量在variables less 现在我转到这个文件 更改变量 编译 less 文件 进入已编译的 css 文件目录并重命名 CSS

  • bootstrap-datetimepicker 仅显示日期

    我正在用这个repo https github com smalot bootstrap datetimepicker由 smalot 提供 我只想选择并显示日期 对于其他一些地方 我显示数据和时间 因此选择此存储库 我可以设法仅使用它来选

  • Twitter Bootstrap 行过滤器/搜索框

    我无法找到有关如何为 Twitter Bootstrap 创建简单搜索查询或行过滤器的教程 我已经尝试了很多 我不确定是否我做错了什么或者插件与 Bootstrap 不兼容 如果可以的话请帮忙 我试过了 document ready fun

  • Twitter 引导选项卡和 JavaScript 事件

    我正在一个项目中使用 twitter bootstrap 特别是它的选项卡功能 http twitter github com bootstrap javascript html tabs http twitter github com b

随机推荐

  • Angular 5 - 预加载配置文件

    Angular 5 预加载配置文件以供跨应用程序使用 我正在寻找有关如何预加载配置文件以允许跨应用程序使用的答案 这就是答案 最初的实现来自 https github com angular angular issues 9047 http

  • 更改 R data.frame 的列名称的两种看似相同的方法 - 只有另一种有效

    我有一个数据框 我需要为一些变量名称添加后缀 就我而言 这是将变量扩展为宽格式后的所有数值变量 有人可以解释一下为什么第一个选项不起作用但第二个选项起作用 df lt data frame ID id var1 1 var2 2 var3

  • 使用 Swift 的 TTTAttributedLabel 中的可点击链接

    我想做一个UILabel一些带有可点击链接的文本 不是指向网页的链接 而是指向像我所做的那样的操作UIButton 所以我用了TTTAttributedLabel这是完美配合Objective C 现在我想做同样的事情Swift 所以我写了

  • 在 Android 中禁用/删除 EditText 中的文本选择句柄

    当用户单击 EditText 时 光标会出现文本选择句柄 文本选择手柄可以移动到字段中的不同位置 文本选择句柄是 有什么方法可以删除它 使其不显示吗 为了解决这个问题 我创建了一个空的形状图像

  • 使用 fullPage.js 中的“afterRender”回调通过 jQuery 事件运行代码

    我正在使用一个名为 fullPage js 的库来创建一个网站 在此我使用 setTimeout 函数来更改背景图像 setTimeout function bg opacity css opacity 1 background image

  • Codeigniter：如果下拉数据来自数据库，则使用 set_select()

    我有一个下拉 字段 它从数据库获取其值 我目前正在寻找一种使用方法set select 但没有成功 这是我现有的观点

  • Swift：沿路径部分移动 UIImage

    我正在使用此代码沿曲线移动 UIImage paint curve for sun let path UIBezierPath let imageSunName small sun png let imageSun UIImage name

  • 如何在 Quarkus 中以编程方式注册 bean？

    我正在尝试找到一种在 quarkus DI 中以编程方式创建 bean 的方法 但没有成功 在这个框架下可以吗 看起来BeanManager尚未实现所需的方法 首先我们要明确什么 以编程方式创建bean 确切的意思是 但首先我们应该定义什么

  • 从 NSDate 对象获取 UTC 时间和本地时间

    在 Objective C 中 以下代码使用以下命令生成 UTC 日期时间信息date API NSDate currentUTCDate NSDate date 然而在斯威夫特中 let date NSDate date 结果为本地日期和

  • 如何在 Golang 的单元测试中测试 net.Conn？

    我目前正在考虑为 Go 中的 net Conn 接口以及在该功能之上构建的其他函数创建一些单元测试 我想知道在 Google Go 中进行单元测试的最佳方法是什么 我的代码如下所示 conn net Dial tcp 127 0 0 1 8

  • 对 SQL Server 存储过程进行版本控制的最佳方法是什么？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 设置 rhc（红帽客户端工具）时出错

    我已经按照 Openshift 网站上的说明安装了 rhc 当我跑步时一切看起来都很好gem install rhc and hgem update rhc但当我尝试打电话时rhc我在下面收到以下消息 我尝试重新安装 ruby 和 git

  • SSD 驱动器会让 Maven 构建更快吗？

    好帖子在这里 https stackoverflow com questions 4557934 would a ssd vs fast hdd drive make my eclipse run compile faster据说使用 SS

  • 如何使用公共函数从 Bytes 返回 KB、MB 和 GB

    我正在编写一个返回文件大小 以 B KB MB GB 为单位 的 函数 VB Net 代码总是首先获取以字节为单位的大小 因此当文件的大小 以字节为单位 小于 100 时 它返回 B 如果它 gt 1000 则将其除以 1000 然后返回

  • EJB 3.1 |通过 JNDI 调用远程会话 bean 时出错

    我试图从 Java SE 简单类 调用一个简单的无状态会话 bean 这是我的豆子 import javax ejb Stateless author MMRUser Stateless public class CapitalBean i

  • Android 11 5G 获取小区参数

    我正在新的 Android studio 预览版上尝试网络类型 5G 上的 Android 11 我的目标是获取单元信息详细信息 但是 方法 getAllCellInfo 在模拟器上返回空 空列表 Android 11 之前的所有模拟器都会

  • Android 在可扩展列表视图中禁用自动滚动

    我在可扩展列表视图中使用 当我打开列表视图中的某个项目时 我的滚动会自动聚焦在打开的项目上 我可以阻止列表聚焦在新项目上并停留在同一个地方吗 我尝试从打开的视图中删除可聚焦的内容 但它不起作用 您需要重写 OnGroupClickListe

  • 无法从 EC2 实例元数据服务检索凭证

    我正在尝试使用 SDK 通过 AWS SES API 发送电子邮件 我的代码基于此处的官方文档 https docs aws amazon com ses latest DeveloperGuide examples send using

  • 最少使用的 unicode 分隔符

    我正在尝试在特定位置使用分隔符标记我的文本 稍后将使用该分隔符进行解析 我想使用最不常用的分隔符 我当前正在查看 2 或 U 0002 字符 使用起来足够安全吗 还有哪些其他建议 文本为 unicode 同时包含英语和非英语字符 A想要使用

  • 字体真棒图标在 Chrome 中显示为正方形？

    我正在尝试在按钮中使用字体很棒的图标 该图标在 Firefox 中工作正常 但当我在 Chrome 中使用它时 它显示为正方形 我环顾四周 唯一发现的是字体的路径可能不正确 但我后来尝试了 cdn 版本here http www boots

热门标签