fontawesome
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>fontawesome test</title>
<link rel="stylesheet" href="test1.css">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<p>
<i class="fas fa-angle-up fa-2x"></i><!--上向三角-->
<i class="fab fa-twitter-square fa-3x"></i><!--twitter-->
<i class="fab fa-facebook-square fa-4x"></i><!--facebook-->
<i class="fab fa-line fa-5x"></i><!--line-->
</p>
<script src="test1.js"></script>
</body>
</html>
・フォントを大きくする特別の指定がある
・それは""内に記述
・他の方法もあるようだ
アニメ効果
110%ぐらいの拡大、105、元に戻すを2繰り返す
https://fontawesome.com/icons/angle-up?style=solid
あと「それをクリックしたら本文のある部分をクリップボードにコピー」はどうやる?
コードコピーアイコン部分のコード
<button type="button" data-balloon="Copy HTML" data-balloon-pos="down" class="button-reset w2 h2 br-100 bg-primary5 white hover-bg-primary6 absolute bottom--075 right--075 flex flex-column items-center justify-center"><span data-balloon-pos="left"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="clipboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-clipboard fa-w-12"><path fill="currentColor" d="M384 112v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h80c0-35.29 28.71-64 64-64s64 28.71 64 64h80c26.51 0 48 21.49 48 48zM192 40c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24m96 114v-20a6 6 0 0 0-6-6H102a6 6 0 0 0-6 6v20a6 6 0 0 0 6 6h180a6 6 0 0 0 6-6z" class=""></path></svg></span></button>