如何将 Bootstrap 图标链接到 Ruby 上的链接?

Posted

技术标签:

【中文标题】如何将 Bootstrap 图标链接到 Ruby 上的链接?【英文标题】:How do you link Bootstrap icons to links on 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   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>

任何帮助将不胜感激!

【问题讨论】:

【参考方案1】:

我会尝试这样的:

<%= link_to teams_path do %>
  <svg   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 %>

【讨论】:

以上是关于如何将 Bootstrap 图标链接到 Ruby 上的链接?的主要内容,如果未能解决你的问题,请参考以下文章

如何让引导选项卡链接链接到 ruby​​ on rails 中的另一个部分文件以显示内容?

如何将 bootstrap-vue 图标包含到 nuxtjs 中?导航栏向下箭头的问题

Bootstrap - 在鼠标悬停时更改图标图像[重复]

如何通过 VueJS 在 Laravel 中使用 Bootstrap 4 图标

如何将 Bootstrap 3 的字形图标更改为白色? [复制]

Turbolinks 不适用于 Rails 4.2.4 Ruby 2.2.4 中的 bootstrap select2