rflexdashboard

Adding to logos to flexdashboard

I'm currently designing my first flexdashboard. I managed to insert one logo top left using the "logo"-option, but I need to add another logo top right. Is there any way to do this?

Solution

  • Assuming your file structure is

    Project
 |
 +-- main.Rmd
 |    
 +-- left.png
 |    
 +-- right.png

    you can use the css handle .navbar-brand::after and add your right logo as background image background-image: url("right.png");

    ---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    logo: left.png
---
<style>
.navbar-logo img {
    max-width:48px;   /* adjust logo width */
    max-height:48px;  /* adjust logo height */
}
.navbar-brand::after {
    content: "";
    background-image: url("right.png"); /* adjust file name or link to right logo */
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 2px;   /* adjust right margin of right logo */
    top: 2px;     /* adjust top margin of right logo */
    width: 48px;  /* adjust right logo width */
    height: 48px; /* adjust right logo height */
}
</style>

    out

    and this also works with links, e.g.

    logo: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7hGqyDoVRsS7jIIzsD2wiwrX6Vb6BSPi8DA&s

background-image: url("https://static.vecteezy.com/system/resources/previews/013/760/951/original/colourful-google-logo-in-dark-background-free-vector.jpg");

    out2