忍者ブログ

からすまる日誌

20191217morning fontawesomeのテスト

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20191217morning fontawesomeのテスト

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>
 
PR

コメント

ブログ内検索

カレンダー

03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30