Adding logo to title slide

Question

How do I properly add logos to the top of the title slide?

After some trial and error, I came up with this which I add to the css file.

.title-slide.remark-slide-content:before{
  position: absolute;
  content:url(logo.svg);
  height:60px;
}

This seems to work for one logo and it's positioned on the top right. I would like to add another logo on the top left too. Is there a better way to do this?

Answer 1

One way would be to create a custom title slide using seal: false with some divs.

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true 
      countIncrementalSlides: false
    seal: false
---

<div class="my-logo-left"></div>

<div class="my-logo-right"></div> 

# hello

---

CSS

.my-logo-left {
content: "";
    position: absolute;
    top: 15px;
    left:   20px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}

.my-logo-right {
content: "";
    position: absolute;
    top: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}