在 Rails 应用程序中使用离子图标

Question

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

Answer 1

如果其他人在您的 Rails 项目中使用 ionicons 时遇到问题，我建议使用我构建的 gem font-ionicons-rails。

使用非常简单，如下：

安装：

将此添加到您的 Gemfile：

gem "font-ionicons-rails"

用法：

在您的 application.css 中，包含 css 文件：

/*
 *= require ionicons
 */

Sass 支持

如果您更喜欢 SCSS，请将其添加到您的 application.css.scss 文件中：

@import "ionicons";

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

@import ionicons

如果之前正在运行，则重新启动您的网络服务器。

就是这样。现在，您可以使用标签 i 或使用 gem 帮助程序在项目中使用 ionicons 来改进使用。

助手

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>

现在很轻松，耶。

Answer 2

这些是我通常采取的步骤：

1. 将以下内容添加到config/application.rb

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

2. 创建目录app/assets/fonts并将字体文件复制到该目录。

3. 复制ionicons.css到app/assets/stylesheets

4. 编辑ionicons.css 文件并更新url() 调用以使用资产管道：

   src: font-url("ionicons.eot?v=1.3.0");
   src: font-url("ionicons.eot?v=1.3.0#iefix") format("embedded-opentype"),
        font-url("ionicons.ttf?v=1.3.0") format("truetype"),
        font-url("ionicons.woff?v=1.3.0") format("woff"),
        font-url("ionicons.svg?v=1.3.0#Ionicons") format("svg");
   

重新启动 webrick/thin/whatever，你应该会很好。 :)