CDNを使用してアイコンを挿入する方法

アイコンは、ユーザーがアプリケーションで実行できるアクションを示すのに適しています。すぐに利用できるアイコンライブラリがいくつかあります。ここに多くのいくつかがあります：

Font Awesome – https://fontawesome.com/
フラティコン– https://www.flaticon.com/
マテリアルデザインアイコン– https://material.io/resources/icons/

確かに上記以外にもたくさんありますが、このガイドの目的は、プロジェクトで上記のライブラリの1つを利用し、それをターゲットにしてスタイルを制御する方法を示すことです。さらに、1つのライブラリのプロセスを学習すると、他のライブラリでも非常によく似ています。

この記事では、Font AwesomeIconLibraryを使用します。以下のエディターで、<link>に注意してください。 HTMLドキュメントの先頭にあります。これは、基本的にFontAwesomeのアイコンライブラリを参照する縮小されたCSSファイルです。「縮小」とは、基本的にすべての空白がなくなったことを意味します。したがって、実際にはフォーマットはありません。

このコンテンツ配信ネットワークがある限り – CDN – <head>内、FontAwesomeの無料ライブラリのほぼすべてにアクセスできるようになります。 SVGライブラリもありますが、JavaScriptについて詳しく説明するときに詳しく説明します。

<!DOCTYPE html>
<html lang="en">
   <head>
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Icons</title>
       <style>
           .icon-container {
               font-size: 24px;
           }
           .fab {
               font-size: 3rem;
               color: #1DA1F1;
           }
           .fa-heart {
               font-size: 4rem;
               color: crimson;
           }
       </style>
      
   </head>
   <body>
       <!-- Icons will go here -->
       <div class="icon-container">
           <i class="fab fa-twitter"></i>
           <span class="fas fa-camera"></span>
           <span class="fas fa-heart"></span>
 
       </div>
   </body>
</html>

上記のエディターでは、本文に2つのインライン要素<i>があることがわかります。および<span> エレメント。どちらの方法も、マークアップにアイコンを書き出すための有効な方法です。私は個人的に<i>を見ました最もよく使用しましたが、<span>も見ましたまれに。

要素の内容が空であることがわかります。 class属性は、HTMLファイルの先頭に挿入したCSSファイルを使用して、FontAwesomeのライブラリから必要なアイコンを取得する方法です。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

CSSファイルを調べて、作業内容を確認したい場合は、確かにそれを行うことができます。しかし、それはあなたにテキストの壁を与えるでしょう、それでそれは少し圧倒されるかもしれません。プロジェクトに無料のアイコンを挿入するために必要なすべての情報が含まれていることを知っておいてください。

アイコンのクラス名には、スタイルプレフィックスとアイコン名の2つの部分があります。上記の例では、「fab」と「fas」が表示されています。「fa」はfontawesomeを表し、「b」はbrandを表し、「s」はsolidを表します。他のプレフィックスもありますが、これらにはPROアカウントが必要です。

アイコン名は、FontAwesomeのウェブサイトのアイコンギャラリーを閲覧しているときに見つけることができます。通常、上記の規則「fa-<アイコンの名前>」に従います。

アイコンのスタイルを設定し、CSSを使用してページ上の位置を制御する場合、アイコンはインライン要素のように扱われます。 Font Awesomeのアイコンのスタイル設定の詳細については、ドキュメントを参照してください。ドキュメントは非常にわかりやすく、ドキュメントを読む練習をするのに役立ちます。 CSSを使用したスタイリングの例は、上記のエディターにあります。

上記のサンドボックス環境を使用して、アイコンを試してスタイリングを開始してください。

CSSFlexbox

CSSインラインブロック

CSSを使用してアイコン付きのフォームを作成するにはどうすればよいですか？
以下は、アイコン付きのフォームを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.m
WordArtを使用してPowerPointに曲線テキストを挿入する方法
PowerPointに曲線テキストを挿入する必要がある場合、 WordArtの助けを借りることができます機能。これにより、任意のスライドのテキストを湾曲させることができ、必要な数の湾曲したテキストを挿入できます。最良の点は、任意のフォントファミリ、サイズ、色などを使用できることです。 WordArtは、PowerPointおよびその他のOfficeアプリに組み込まれている機能です。これは、ユーザーが任意のスライドおよびスライドの任意の場所に異なるスタイルのテキストを追加するのに役立ちます。他のものと区別できるように、丸みを帯びたテキストを表示したり、波打つ効果を適用したりする必要がある場