使用bootstrap图标做链接_icon link-优快云博客

本文链接：https://blog.youkuaiyun.com/plbeast/article/details/8883393

本文介绍如何在Bootstrap框架中使用图标作为导航链接，并通过JavaScript实现点击事件，以简化导航流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想使用图标作为导航的链接，bootstrap刚好提供了一系列看上去还不错的图标。这些图标可以通过<i class="icon-search"></i>这样的样式来调用。但是这样的图标是作为背景图出现的，无法直接添加链接。所以先定义一个样式".iconlink",在通过js处理，十分方便。

<ul id="te09" class="item2" style="display:none;">
  <li><a href="__GROUP__/Workflow/workflowList"  target="main" title="工作流定义">工作流定义</a> <a><i class="icon-plus iconlink" href="__GROUP__/Workflow/workflowAdd" id="ddd"></i></a></li>
  <li><a href="__GROUP__/Workflow/placeList"  target="main" title="库表管理">库表管理</a></li>
  <li><a href="__GROUP__/Workflow/transitionList"  target="main" title="变迁管理">变迁管理</a></li>
  <li><a href="__GROUP__/Workflow/arcList"  target="main" title="弧定义">弧表定义</a></li>
  <li><a href="__GROUP__/Node/index"  target="main" title="令牌管理">令牌管理</a></li>
  <li><a href="__GROUP__/workflow/workitemList"  target="main" title="工作管理">工作项管理</a></li>
</ul>
<script type="text/javascript">
  $(".iconlink").click(
  	function(){
      parent.frames.main.location=$(this).attr("href");
	 }  
  );
</script>