在 rails 应用程序中使用 ionicon

Question

我有一个 rails 应用程序，我想在其中使用这些。按照说明，我确保.css中的字体路径是资产/字体/离子图标...但它似乎不起作用。以前有人用过这些吗？

Answer 1

如果其他人在你的rails项目中使用ionicons有问题，我建议使用我构建的gem font-ionicons-rails。

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

安装：

将此添加到您的宝石文件中：

gem "font-ionicons-rails"

用法：

在应用程序中.css，包含 css 文件：

/*
 *= require ionicons
 */

萨斯支持

如果您更喜欢 SCSS，请将以下内容添加到您的应用程序.css.scss 文件中：

@import "ionicons";

如果使用 Sass 缩进语法，请将以下内容添加到 application.css.sass 文件中：

@import ionicons

然后重新启动您的网络服务器（如果它以前正在运行）。

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

助手

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/what，你应该很好。 :)