如何将 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 中?导航栏向下箭头的问题
如何通过 VueJS 在 Laravel 中使用 Bootstrap 4 图标