Add hyperlink to PNG inside flexdashboard

449 Views Asked by At

I would like to add a hyperlink function to a PNG I have added to my flexdashboard. I've managed to add a hyperlink to a text as shown in the code below (in the first section), but I would like to add it to the PNG icon I have added in the second section of my code

---
title: "PNG Hyperlink"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

# Homepage

## Column {data-width=500}

### Introduction
<font size = "5">Please read user manual before exploring this dashboard. You can find user manual by clicking <a href="file:///C:/Users/Filip/Desktop/Dashboard%20guide.htm" target=_blank>here</a></font><br><br><br>

### Introduction 2
<font size = "5">Please read user manual before exploring this dashboard. You can find user manual by clicking the following icon</font><br><br><br>
```{r}
knitr::include_graphics("document-icon.png")
```

Additionally, it would be great if someone knows how to make this picture smaller and wrap text arround it.

2

There are 2 best solutions below

0
On BEST ANSWER

I have managed to solve this issue by working with the code following @samarmohan input. Here is the code

### Introduction 2
<font size = "5">Please read user manual before exploring this dashboard. You can find user manual by clicking the following icon</font><br><br><br>
<a href="file:///C:/Users/Filip/Desktop/Dashboard%20guide.htm" target=_blank><center>
```{r dpi=10}
knitr::include_graphics("document-icon.png")
```
</center></a>

I have added href in order to add hyperlink to the icon and make the icon smaller using dpi = inside the {r} box

0
On

Add an href attribute. This should work