如何在flexdashboard中正确对齐社交链接

方法步骤： #

1. 修改YAML配置，合并图标为单个导航栏项
   把原来分散的三个图标条目合并成一个，用HTML标签编写图标链接，并设置对齐方式为右侧：

   ---
   title: "Dashboard"
   output: 
     flexdashboard::flex_dashboard:
       storyboard: true
       css: ["default", "assets/css/my-theme.css", "assets/css/my-fonts.css"]
       orientation: columns
       navbar:
           - align: right
             html: |
               <a href="https://github.com/" target="_blank"><i class="fa fa-github"></i></a>
               <a href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a>
               <a href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
       vertical_layout: fill
       theme: 
         version: 3
         bootswatch: yeti
   runtime: shiny
   ---
   

   这样所有图标会在同一行显示，且整体靠右对齐。

2. 调整图标间距（可选）
   如果觉得图标之间或图标与右侧边缘的间距不合适，在assets/css/my-theme.css中添加以下CSS代码：

   /* 调整图标之间的横向间距 */
   .navbar-nav > li > a {
     margin-left: 15px;
   }
   /* 调整图标组与右侧边缘的间距 */
   .navbar-nav {
     margin-right: 10px;
   }
   

原理说明： #

原来的配置中每个图标是独立的导航栏条目，flexdashboard在storyboard模式下会默认让每个条目单独占一行。将图标合并为单个HTML条目后，它们会作为一个整体渲染，实现同行显示，再通过align: right设置即可完成右对齐。

内容的提问来源于stack exchange，提问作者Ranji Raj