Css 在rails应用程序中使用ionicons

我有一个rails应用程序要在中使用。按照说明，我确保.css中的字体路径是assets/fonts/ionicons。。。但它似乎不起作用。以前有人用过吗？

以下是我通常采取的步骤：

将以下内容添加到

config/application.rb

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

---

重新启动webrick/thin/whatever，您应该表现得很好。：）

如果其他人在rails项目中使用ionicons有困难，我建议使用我构建的gemfont-ionicons-rails

它的使用非常简单，如下所示：

安装： 将此添加到您的文件：

gem "font-ionicons-rails"

用法： 在application.css中，包括css文件：

/*
 *= require ionicons
 */

Sass支持 如果您喜欢SCSS，请将其添加到application.css.SCSS文件中：

/*
 *= require ionicons
 */

@import "ionicons";

如果使用Sass缩进语法，请将其添加到application.css.Sass文件：

@import ionicons

然后重新启动以前运行的Web服务器

就这些。现在，您可以在项目中使用标记

i

或使用gem助手来提高使用率

助手

ion_图标“摄像头”
# => 
ion_图标“照相机”，文字：“拍照”
#=>拍照
ion_图标“V形右”，文字：“开始”，右：真
#=>开始吧
内容标签（：li，离子图标（“圆形复选标记”，文本：“项目符号列表项”））
#=>
项目符号列表项

---

现在很轻松，耶。

嘿，我是Ionicons的创建者之一。到底是什么不起作用？你能添加更多信息吗？我认为这不值得作为一个新的答案发布，但如果你将上面的“应用程序”更改为“供应商”，你可以将其与你的代码分开，这在项目变大时特别好。github上还有一个umham35的gem，用于将ion集成到rails项目中。

ion_icon "camera"
# => <i class="ion-camera"></i>

ion_icon "camera", text: "Take a photo"
# => <i class="ion-camera"></i> Take a photo

ion_icon "chevron-right", text: "Get started", right: true
# => Get started <i class="ion-chevron-right"></i>

content_tag(:li, ion_icon("checkmark-round", text: "Bulleted list item"))
# => <li><i class="ion-checkmark-round"></i> Bulleted list item</li>