css - 如何将链接分配给 omniauth facebook 按钮

Question

这是我的代码:

<div class="col-md-6 col-sm-6 col-xs-6">
  <%- if devise_mapping.omniauthable? %>
    <%- resource_class.omniauth_providers.each do |provider| %>
      <%= link_to "Sign in", omniauth_authorize_path(resource_name, provider) %>
    <% end -%>
  <% end -%>
</div>

在上面的代码中，我如何将 link_to "Sign in" 更改为:

<button class="btn btn-facebook btn btn-lg btn-block"><i class="fa fa-facebook fa-2x"></i> | Connect with <br> Facebook</button>

因此，我将展示我定制的 Facebook 按钮，而不是“登录”简单按钮。

Answer 1

答案:我就是这样解决的

<div class="col-md-6 col-sm-6 col-xs-6">
  <%- if devise_mapping.omniauthable? %>
    <%- resource_class.omniauth_providers.each do |provider| %>
      <%= link_to omniauth_authorize_path(resource_name, provider), class: 'btn btn-facebook btn btn-lg btn-block' do %>
        <i class="fa fa-facebook fa-2x"></i>
        |Connect with <br> Facebook
      <% end %>
    <% end -%>
  <% end -%>
</div>

看起来像这样

当有人点击它时，它会被重定向到所需的路径，即 omniauth_authorize_path(resource_name, provider)

对于那些需要此按钮的 css 代码的人来说，这里是

.btn-facebook.btn.btn-lg.btn-block {
  color: white;
  background-color: DodgerBlue;
  font-size: 1em;
  &:hover {
    color: white;
    background-color: RoyalBlue;
  }
}

如果有人能告诉我如何使“f”图标位于按钮的中心，我将不胜感激。

谢谢