如何在simple_form中使用FontAwesome
在simple_form中使用FontAwesome，可以通过以下步骤实现：
- 首先，确保你已经在你的应用程序中引入了FontAwesome的CSS文件。你可以在FontAwesome的官方网站上下载CSS文件，或者使用CDN链接。例如，你可以在你的应用程序的HTML文件中添加以下代码来引入FontAwesome的CSS文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">- 确保你已经在你的应用程序中引入了simple_form的gem。你可以在Gemfile中添加以下代码，并运行
bundle install来安装simple_form：
gem 'simple_form'- 在你的表单中使用FontAwesome图标，你可以在simple_form的输入字段选项中使用
:input_html选项来添加自定义的HTML属性。例如，如果你想在一个文本输入字段中使用一个FontAwesome的搜索图标，你可以这样做：
<%= simple_form_for @model do |f| %>
<%= f.input :search, input_html: { class: 'form-control', placeholder: 'Search' } do %>
<i class="fas fa-search"></i>
<% end %>
<% end %>在上面的例子中，我们使用了input_html选项来添加class和placeholder属性，并在输入字段的内部使用了一个<i>标签来插入FontAwesome的搜索图标。你可以根据需要自定义其他的FontAwesome图标。
需要注意的是，以上代码中的fas fa-search是FontAwesome搜索图标的类名。你可以在FontAwesome的官方网站上找到各种图标的类名。
这样，你就可以在simple_form中使用FontAwesome图标了。记得根据需要自定义其他的HTML属性和FontAwesome图标类名。
相关·内容
2回答
对于我的Rails3应用程序，我使用了simple_form和devise。当我需要定制设计视图时，我运行了
rails generate devise:views
视图中生成的表单当然是simple_form表单。
这破坏了i18n的功能，因为simple_form使用simple_form密钥而不是设备密钥来查找翻译。例如：
I18N keys: [:it, :simple_form, :placeholders, :user, :edit, :email]
I18N keys: [:it, :simple_form, :placeholders, :user, :email]
I18N
浏览 0提问于2012-11-15得票数 1
回答已采纳
我正在尝试为一个复选框获取两个标签，如Twitter Bootstrap文档中所描述的那样。(参见 ->水平窗体->复选框(文本输入下面))
所以我想要显示的是左边描述的标签，复选框本身，右边的提示。
simple_form gem中twitter引导程序的标准实现创建了一个<p>标记，用于显示提示，因为它试图对所有类型的输入保持一致。
现在，我想在simple_form初始化器中为“引导复选框”创建一个自定义包装器，但我不知道如何解决这个问题。
这就是我目前使用裸rails (Erb)实现它的方式：
<div class="control-group&#
浏览 5提问于2012-06-11得票数 4
回答已采纳
1回答
我正在尝试将simple_form构建的表单中的所有表单元素居中对齐，所以我创建了一个.simple_form，并填充了浮点、文本对齐等某些东西来使所有内容居中，但它不起作用
.simple_form {
float: none;
text-align : center;
margin-right: auto;
margin-left: auto;
position: auto;
}
/*
.simple_form label {
float: left;
width: 100px;
margin: 2px 10px;
}
浏览 1提问于2014-08-28得票数 1
我完全是编程初学者，我正在尝试使用Bootstrap 3、Rails 4和simple_form构建一个表单。
问题是，我在网上找到的每一点帮助都与Bootstrap 2或Rails 3有关。
到目前为止，我就是在这里：
HTML已经做好了启动3的准备。
创建新应用程序(rails新app_name)
安装了gem引导-railsgem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anj
浏览 3提问于2013-09-18得票数 1
最新的simple_form为3.0.1，需要在其and文件中执行以下操作：
s.add_dependency('activemodel', '>= 4.0.0', '< 4.1')
s.add_dependency('actionpack', '>= 4.0.0', '< 4.1')
安装simple_form 2.1.1时，rails生成器rails generator simple_form:install导致错误：
:in `raise_if_conflict
浏览 2提问于2014-02-13得票数 1
回答已采纳
我想在Markdown文件中使用CSS类。
例如，如果我将其CSS文件导入到HTML中，<i class="icon-renren"></i> (来自fontawesome)应该显示为一个图标。
在Markdown中有什么解决方案吗？
浏览 18提问于2014-11-28得票数 43
3回答
我使用simple_form来设置事件的开始和结束时间。但是，它在错误的时区中显示时间。
我的控制器：
class EventsController < ApplicationController
def new
@event = Event.new(start_time: 1.hour.since(now), end_time: 2.hours.since(now))
render 'edit'
end
...
private
...
def now
Time.zone.now
end
end
我的观点(使用slim)
浏览 0提问于2018-05-29得票数 0
1回答
我注意到字体棒已经集成到Gitbook中了。我们在_book/gitbook/fonts/fontawesome/下有以下文件，
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
我将一个图标(比如<i class="fa-solid fa-circle"></i> )添加到一个标记文件中，但是该图标没有如下面
浏览 12提问于2022-04-06得票数 0
回答已采纳
2回答
我正在使用ruby2和rails 4。我一直坚持为simple_form创建我自己的id。每次我登录到我的项目时，它都会创建不同的id。能拿到那个身份证吗？
<%= simple_form_for @kyc do |f| %>
是我的代码，每次我登录时，我都会看到检查元素中的代码(Google)。
<form accept-charset="UTF-8" action="/kycs/19" class="simple_form edit_kyc" id="edit_kyc_19" method="po
浏览 0提问于2014-05-26得票数 2
回答已采纳
在simple_form 2.0.4中，我做到了：
= simple_form_for(@thing) do |f|
它会生成：
<form accept-charset="UTF-8" action="/things/37" class="simple_form" id="edit_thing_37" method="post" novalidate="novalidate">
但我需要：
<form accept-charset="UTF-8" action=&
浏览 0提问于2012-11-16得票数 5
回答已采纳
我有一个恼人的IE6布局错误
这张截图显示了问题所在：
问题:文本输入，即<input type='text' />大小错误。
文本输入有点不稳定。它们应该是248 as宽(就像textarea)，并且与它们的标签处于相同的水平水平上。所有其他浏览器似乎都遵循以下代码，但我们的朋友IE6没有
.simple_form input[type='text'],.simple_form input[type='email'],.simple_form textarea
{
width:240px;
border
浏览 2提问于2011-04-19得票数 0
回答已采纳
我的问题是如何在rails form read only中设置字段。下面是quotes控制器中的一个选择框。不允许用户更改选择。
<% @quote.test_items.each do |t| %>
<%= f.association :test_items, :label => false, :selected => t.id %>
<% end %>
这个应用程序使用simple_form。非常感谢。
浏览 0提问于2012-02-03得票数 14
我正在使用simple_form gem，我有一个国家集合，当我选择国家时，它工作得很好，更新的记录将有国家id存储，但当我试图编辑记录时，所选的国家在编辑表单中默认不被选中。
以下是编辑表单中的代码：
= f.input :country_id, :collection => all_countries
simple_form不应该从数据库中查看选定的国家吗？
浏览 2提问于2012-02-02得票数 58
回答已采纳
我正在使用mPDF，当导出HTML到pdf时，所有内容都显示得很完美。但glyphicons并没有出现。因此，我在/application/third_party/mpdf/config_fonts.php中添加了字体风格代码，如下所示
"fontawesome" => array(
'R' => "fontawesome-webfont.ttf"
),
并更改了“视图中的代码”页面。
<i class="fa fa-phone"></i>
至
<span style=
浏览 0提问于2018-03-29得票数 1
1回答
我试图添加一个方框图标在我的反应应用程序使用下面的代码(见)，但图标不会显示。
./src/App.js
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Fon
浏览 4提问于2022-06-21得票数 0
我试图在我的反应项目中使用字体Awese5Pro(我有许可证)，我已经尽我最大的能力遵循中的说明，但我仍然有问题。
在我的项目中，我用npm安装了fontawesome，fontawesome pro type，fontawesome，fontawesome pro，fontawesome pro，和.所有这些文件夹都在我的节点_模块/@fortawesome/目录中。
在我的App.js中，我有这些导入(这不是整个文件，只是相关的片段)：
import fontawesome from '@fortawesome/fontawesome';
import FontAwesom
浏览 0提问于2018-04-30得票数 8
回答已采纳
“这是我的代码，我需要多个barrating in循环由VueJS正常运行，但rating不显示，我从其他文件调用barrating，如下所示：”
$( '#example-fontawesome' ).barrating({
theme: 'fontawesome-stars',
showSelectedRating: false,
onSelect: function(){
ratingviewmodel.ratingSubmit();
}
});
$( '.examplefontawesome' ).
浏览 3提问于2016-01-17得票数 1
给定以下数组 $locationIcon = array(
'face' => 'FontAwesome',
'code' => '\uf015',
'size' => 75,
'color' => 'gray',
); 它是通过json_encode编码的，我希望得到这样的输出： {
face: 'FontAwesome',
code: '\uf015',
size:
浏览 10提问于2019-02-12得票数 0
回答已采纳
1回答
我在AngularJS中使用simple_form：
= simple_form @post do |f|
= f.input :title, input_html: { "ng-model" => "title" }
它适用于我在新帖子上的场景，但对于编辑现有的帖子，它不会绑定/填充表单上帖子标题的现有值。我认为Rails已经填充了这个值，但是因为$scope.title是空的，所以AngularJS会在页面加载后将其删除。
浏览 3提问于2014-07-10得票数 3
使用simple_form，我们可以使用以下命令更改标签的类别：
label_html => {:class => "myclass"}
但是在处理复选框时，我们如何做同样的事情呢？
simple_form分配collection_check_boxes的默认类
有什么方法可以改变这个默认的类吗？
浏览 0提问于2011-04-28得票数 31
环境是一个独立的脚本，使用HTMLService()部署为web应用程序。
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
// see: http://stackoverflow.com/a/39309690
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
我可以链接到index.h
浏览 0提问于2016-10-03得票数 1
回答已采纳
1回答
无法导入方框-网页字体排版
、、、、
我正在尝试导入一个字体(字体4.4.0版)，我位于我的项目中一个名为“字体”的目录中：
我读过几篇StackOverflow文章，并试图在css中使用@font-face导入它：
@font-face {
font-family: 'MyWebFont';
src: url('../fonts/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype&#
浏览 3提问于2020-07-22得票数 0
1回答
我无法在字体目录中加载字体，字体中有图标样式，如：
.fa-star:before {
content: "\f005";
}
我想得到内容：“\f 005”；并且放进我自己的风格，但是我认为目录字体没有加载，如何在目录字体中加载字体令人敬畏的文件？
我尝试将此代码添加到我的样式中：
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawe
浏览 1提问于2016-11-11得票数 1
回答已采纳
1回答
我已经在我的railsapp中构建了 simple_form 字段，当我添加simple_form标记时，它的样式得到了更改，我想将这个simple_form与我已经构建好的前端引导窗体集成在一起--这是我的
自举形式
<input type="text" class="form-control" placeholder="Username" required autofocus />
simple_form场
<%= f.input :email,html:{class: "form-control"},req
浏览 3提问于2016-04-28得票数 0
1回答
I code element with visual composer. I want to use fontawesome in element.
Code here show list font-awesome in param visual composer
<code>
array(
'type' => 'iconpicker',
'heading' => esc_html__('Fontawesome', 'interior'),
'param_n
浏览 3提问于2017-09-27得票数 0
2回答
我在Rails 4上使用‘-sass’和'simple_form‘gems。当我运行这个生成器：rails g simple_form:install -- Bootstrap 时，我收到一条消息，上面写着：“一定要在您的应用程序中提供引导样式表的副本，您可以在上获得它。”
为什么我需要一个引导样式表的副本，样式表是什么？这个“靴靴我去了提供的链接，但得到了404错误。如果有人能很好地解释我需要做什么，我们将不胜感激！我对Rails相当陌生，所以如果这不是一个很好的问题，请提前道歉。谢谢!
浏览 6提问于2014-05-17得票数 0
1回答
我有一个反应组件，生活在两个不同的应用程序与两个不同的webpack支架。
在内部，我使用了一个FontAwesome组件(react-fontawesome)，如下所示：
<FontAwesome
name="chevron-left"
className="viewtoggle"
onClick={() => doSomething()}
/>
现在，在这两个应用程序之一中，viewtoggle定义优先于FontAwesome默认css fa fa-chevron-left，而在另一个应用程序中则相反，导致跳过font-size
浏览 3提问于2017-12-11得票数 1
回答已采纳
3回答
环境Mac 4.0.4 Ruby 2.1.1
宝石：
创建一个带有json类型字段的模型，这里是我的迁移文件：
create_table :my_model do |t|
t.string :name
t.json :my_field
t.timestamps
end
现在，当我尝试创建一个新对象(新表单)时，我得到了这个错误
RuntimeError - No input found for json:
simple_form (3.0.2) lib/simple_form/form_builder.rb:551:in `find_mapping'
simple
浏览 13提问于2014-04-14得票数 5
回答已采纳
1回答
在我的rails应用程序中，我使用了simple_form。我需要获取输入字段中的错误消息，而不是显示在旁边，如下图所示。
我该怎么做？
浏览 2提问于2016-07-13得票数 1
回答已采纳
2回答
我正在尝试将字体添加到Firefox扩展中。
我已经设法用PageMode添加了样式：
pageMod.PageMod({ ...
...
contentStyleFile: [
...
self.data.url('font-awesome.min.css')
],
在css中，我有：
font-family:'FontAwesome';src:url('resource://extension_id/fonts/fontawesome-webfont.eot?v=4.0.3')
其中extension_id当然是我的ID。
当脚本加载时，我得
浏览 4提问于2014-01-17得票数 1
我目前为rails应用程序找到了 gem。目前，我加入了rails项目，并将其添加到现有项目中。安装后，它为使用simple_form进行新的迁移创建表单。我想迁移所有现有的表单来使用simple_form。
如何完成现有的非simple_form布局表单来使用simple_form布局。
有没有任何方法可以使用控制台或脚本生成表单来进行simple_form布局？
浏览 1提问于2014-07-17得票数 2
5回答
我有一个grails应用程序，我集成了Bootstrap 3。除了图标没有显示/显示在我的页面之外，一切都很好。
我的登录页面中有以下代码。
<div class="input-group">
<span class="input-group-addon ">
<i class="icon-user icon-color"></i>
</span>
<input type="text" class="form-cont
浏览 5提问于2014-06-09得票数 3
回答已采纳
将两个div放在同一行是一个老问题。但在rails中使用simple_form时，我找不到解决方案。我想要做的是在同一行上显示内容及其标签。标签的宽度为125px (.left)，内容在右侧(.right)。标签中的文本与右对齐，内容中的文本与左对齐。
下面是HTML：
<form id="new_production" class="simple_form new_production" novalidate="novalidate" method="post" action="/projects/1/produc
浏览 0提问于2013-01-02得票数 7
回答已采纳
我想我把事情搞得太复杂了..。
我有一个人模型(id，first_name，last_name，city_id)和一个城市模块(id，city_name)。我有一个协会，在那里的人belongs_to，城市和城市的has_many人民。我用simple_form构建了一个simple_form，并在person端添加了一个下拉列表，这样用户就可以从下拉菜单中选择城市，并将城市ID存储在person模型(int)中的city_id中。所有这些都很好。
我的目标是修改“显示和索引”操作，在其中显示所有人员的清单，使城市名为show，而不是city_ID整数。
现在看起来是这样的:第一，最后的城市亚
浏览 1提问于2014-01-25得票数 0
回答已采纳
我正在使用rails 4.2.4，我正在尝试使用simple_form
现在，我的观点给出了错误：
undefined method `simple_form_for' for #<#<Class:0xbbc2748>:0xbbc1460>
Gem列表返回一个宝石列表，它包括simple_form。我通过键入simple_form安装了gem install simple_form
$gem list
返回
simple_form (3.2.1)
我也试过这样做：
rails generate simple_form:install --bootstrap
C
浏览 6提问于2016-04-19得票数 2
回答已采纳
1回答
角5与字形5
、、、、
经过大量的研究，包括、等的研究，我未能在ARAN5-AppandFont-Awese5 (Pro)集成方面取得进展。
Problem：图标不出现。
有关我当前场景的更详细信息：
package.json
(...)
"dependencies": {
"@angular/animations": "^5.2.4",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core":
浏览 1提问于2018-02-13得票数 2
回答已采纳
如何将rel=preload属性包含到css文件中的字体文件中我有css代码在css文件中加载字体文件
@font-face{font-family:FontAwesome;src:url(../fonts/fontawesome-webfont93e3.eot?v=4.4.0);src:url(../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.4.0) format('embedded-opentype'),url(../fonts/fontawesome-webfont93e3.woff2?v=4.4.0) format
浏览 0提问于2020-10-10得票数 1
我试图添加材料设计启动手风琴到我的角度应用程序使用的例子。
以下是我的HTML：
<mdb-accordion [multiple]="false">
<mdb-accordion-item [collapsed]="false">
<mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
<mdb-accordion-item-body>
Anim paria
浏览 2提问于2020-02-14得票数 1
回答已采纳
3回答
当我尝试使用vue-fontawesome框架和@ Nuxtjs /fontawesome框架时，我遇到了nuxtjs的错误，这是一个错误：
[nuxt] [request error] Cannot read properties of undefined (reading 'component')
at $id_c50a96b3 (./.nuxt/dist/server/server.mjs:3239:31)
at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:19193:3)
这是我
浏览 37提问于2022-04-29得票数 5
回答已采纳
1回答
为了避免浏览器的缓存，我想把版本查询字符串连接到我的@font-face的url中。有很多url。怎么用正确的方式实现呢？
@font-face {
font-family: 'fontawesome';
src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz');
src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz#iefix') format('embedded-opentype')
浏览 3提问于2017-01-19得票数 7
回答已采纳
找不到模块:错误:无法解析'C:\Users\ANNOH\Desktop\React_Portfolio\react-portfolio\node_modules@fortawesome\react-fontawesome‘中的“@fortawesome/fontawesome”
./node_modules/@fortawesome/react-fontawesome/index.es.js 1:0-64中的错误
模块未找到:错误:无法解析'C:\Users\ANNOH\Desktop\React_Portfolio\react-portfolio\node_modules@
浏览 5提问于2022-05-22得票数 1
回答已采纳
1回答
我的MainMenuView中有一个部分，它在ContentControl中加载选定的视图模型。DataContext of MainMenuView是MainMenuViewModel。
我可以将主菜单中的按钮绑定到SelectedViewModel上的命令，还是必须引发事件？
<Fluent:Ribbon>
<!--Userdata-->
<Fluent:RibbonTabItem Header="Data" x:Name="TabVerm" Group="{Binding ElementName=Vermi
浏览 2提问于2020-11-05得票数 0
回答已采纳
这是我的第一篇文章！ 我想使用一个很棒的图标：<i class="fas fa-star"></i> 在simple_form表单中。<%= f.input :rating, collection: 0..5 %> 最好的方法是什么？a ⭐️ with 'rating' a side谢谢
浏览 18提问于2020-04-06得票数 0
1回答
在我的Next.js / React文件中有以下几行： import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 基于文档：https://nextjs.org/docs/advanced-features/dynamic-import 我将其替换为： import dynamic from "next/dynamic";
const FontAwesomeIcon = dynamic(() => import("@fortawesome/react-fontawesome
浏览 33提问于2021-10-10得票数 0
回答已采纳
5回答
我正在开发一个Google Chrome扩展，显示在一个特定的网站上。我想在我的chrome扩展中使用Fontawesome。当我尝试加载字体时，出现错误GET chrome-extension://invalid/ net::ERR_FAILED。
在样式表中，webfonts包含在@font-face中，如下所示。
src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');
我还尝试直接嵌入我的扩展id，尽管它不起作用。
我的manifest.jso
浏览 18提问于2016-12-20得票数 11
我有4个SASS文件main.sass，_fonts.sass，_variables.sass，_home.sass。
main.sass
@import 'fonts'
@import 'variables'
@import 'home'
_fonts.sass
@font-face
font-family: "FontAwesome"
font-weight: normal
font-style: normal
src: url("https://maxcdn.bootstrapcdn.
浏览 1提问于2018-07-13得票数 8
回答已采纳
我有以下simple_form输入(HAML)：
= congress_detail_form.input :stand_setup_time, as: :time
as：:time部分可能是多余的，因为数据库列类型是TIME，我认为simple_form会检测到。
它默认为当前时间(它显示两个选择，一个用于小时，另一个用于分钟)。我无法使用default:或value:设置默认值00:00。这有可能吗？
我一直无法找到在simple_form代码库中设置默认设置的位置。任何帮助都将不胜感激。
我还没有发现与simple_form一起工作的时间选择器。
浏览 4提问于2013-10-31得票数 7
回答已采纳
因此，我在数据库中有一个精度为2的十进制字段，用于表示货币。它运行良好，除非最后一个小数位以0结束，即。799.90。相反，当它显示在字段中时，它会将其剥离到799.9。我知道number_with_precision，但我不能将该辅助方法与simple_form编号字段一起使用，因为它只接受符号和html选项作为参数。
然后我想我需要创建一个自定义输入来扩展simple_form的默认number_field，但是语法似乎没有很好的文档记录，所以我还不知道如何在这个自定义输入的定义中调用number_with_precision。
我本质上是想用formtastic来做这个问题想要做的事情。
浏览 0提问于2012-07-10得票数 17
回答已采纳
我在尝试安装gem 'client_side_validations-simple_form‘时遇到了困难。我的Gemfile看起来像
gem 'rails', '3.2.12'
gem 'turbolinks', '1.0.0'
gem 'simple_form', '2.1.0'
gem 'client_side_validations', '3.2.5'
gem "client_side_validations-simple_form"
浏览 0提问于2013-04-04得票数 0
回答已采纳
我想在封闭的网络环境中使用fontawesome。所以我们不能访问CDN。
我知道我可以简单地下载css，但是字体文件在哪里呢？
CSS实际上指向这个
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("
浏览 1提问于2014-05-28得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
