如何将 Bootstrap 图标链接到 Ruby 上的链接？答案

【问题标题】：How do you link Bootstrap icons to links on Ruby?如何将 Bootstrap 图标链接到 Ruby 上的链接？
【发布时间】：2020-10-26 18:26:01
【问题描述】：

您好，我目前正在尝试将 Bootstrap 图标链接及其各自的文本链接到某个链接。目前，我尝试用单引号包裹 svg 标签，但这只是给了我字符串。

目前我的代码是这样的：

        <li class="nav-item d-flex flex-column">
            
            <a href="#" class=class="nav-link d-flex flex-column">
                        
                    <span class="nav-link px-5" href="#"><%= link_to 'Leaderboard', teams_path %></span>

                    <%= link_to '<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-flag-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M3.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/>
                        <path fill-rule="evenodd" d="M3.762 2.558C4.735 1.909 5.348 1.5 6.5 1.5c.653 0 1.139.325 1.495.562l.032.022c.391.26.646.416.973.416.168 0 .356-.042.587-.126a8.89 8.89 0 0 0 .593-.25c.058-.027.117-.053.18-.08.57-.255 1.278-.544 2.14-.544a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5c-.638 0-1.18.21-1.734.457l-.159.07c-.22.1-.453.205-.678.287A2.719 2.719 0 0 1 9 9.5c-.653 0-1.139-.325-1.495-.562l-.032-.022c-.391-.26-.646-.416-.973-.416-.833 0-1.218.246-2.223.916A.5.5 0 0 1 3.5 9V3a.5.5 0 0 1 .223-.416l.04-.026z"/>
                    </svg>', teams_path %>
                    
            </a>
        </li>

任何帮助将不胜感激！

【问题讨论】：

标签： html css ruby-on-rails bootstrap-4 hyperlink

【解决方案1】：

我会尝试这样的：

<%= link_to teams_path do %>
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-flag-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M3.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/>
                    <path fill-rule="evenodd" d="M3.762 2.558C4.735 1.909 5.348 1.5 6.5 1.5c.653 0 1.139.325 1.495.562l.032.022c.391.26.646.416.973.416.168 0 .356-.042.587-.126a8.89 8.89 0 0 0 .593-.25c.058-.027.117-.053.18-.08.57-.255 1.278-.544 2.14-.544a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5c-.638 0-1.18.21-1.734.457l-.159.07c-.22.1-.453.205-.678.287A2.719 2.719 0 0 1 9 9.5c-.653 0-1.139-.325-1.495-.562l-.032-.022c-.391-.26-.646-.416-.973-.416-.833 0-1.218.246-2.223.916A.5.5 0 0 1 3.5 9V3a.5.5 0 0 1 .223-.416l.04-.026z"/>
  </svg>
<% end %>

【讨论】：