vanaf1979/add-icon-to-pdf-links.html

## add-icon-to-pdf-links.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add icon to pdf links</title>

    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.1/css/all.css?ver=1.0.0' type='text/css' media='all'/>
</head>
<body>

<a href="document.pdf">Link to a pdf document</a>

<style>
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        min-height: 100vh;
        font-family: sans-serif;
    }

    a {
        color: black;
    }

    a[href$=".pdf"]::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        content: "\f1c1";
        padding-right: 4px;
    }
</style>

</body>
</html>

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Add icon to pdf links</title>

	<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.1/css/all.css?ver=1.0.0' type='text/css' media='all'/>
	</head>
	<body>

	<a href="document.pdf">Link to a pdf document</a>

	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 100vh;
	font-family: sans-serif;
	}

	a {
	color: black;
	}

	a[href$=".pdf"]::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f1c1";
	padding-right: 4px;
	}
	</style>

	</body>
	</html>