コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > アイコンボタンフレームワークの純粋なCSS実装

アイコンボタンフレームワークの純粋なCSS実装

WBOY
リリース： 2016-07-25 08:47:59
オリジナル
1450 人が閲覧しました
fa-lg (33% 増加)、fa-2x、fa-3x、fa-4x、または fa-5x クラスのアイコン サイズ。

fa-stack-1x 固定サイズのアイコン、fa-stack-2x

任意の回転および反転アイコン fa-rotate-* および fa-flip-* クラスを使用します。 *度数を表す: fa-rotate-90

任意のアイコンを取得するには、fa-spin 回転クラスを使用します。 fa-spinner、fa-refresh、fa-cog をうまく扱えます

fa-border border

デモアドレスデモ:
http://www.0917cc.com/blog/b926.htm
  1. @font-face {
  2. font-family: 'FontAwesome';
  3. src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  4. src: url('. ./fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format( 'woff')、url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype')、url('../fonts/fontawesome-webfont.svg?v=4.1 .0#fontawesome Regular') format('svg');
  5. font-weight:normal;
  6. font-style:normal;
  7. }
コードをコピー
  1. WeChat アイコン
  2. < href='#' class="svn_btn3 p5">WeChat アイコン
  3. WeChat アイコン
コードをコピー
アイコンボタンフレームワークの純粋なCSS実装


関連ラベル：
纯css实现图标按钮框架
ソース：php.cn
前の記事：LAMP+LNMP環境構築ビデオチュートリアルを無料ダウンロード！ 次の記事：pdo 操作により、sqlite はより多くの SQL ステートメントと互換性があります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpres...
から 2024-04-04 11:55:21
0
2
315
Vanilla JS setTimeout(): 間違った動作の特定 ハンバーガー メニューのアニメーションを HTML、CSS、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次の...
から 2024-04-02 20:44:40
0
1
284
ヘッダーの中央に画像を表示するにはどうすればよいですか? まず、私のコードは HTML、CSS、JS の 3 つのファイルに基づいており、HTML の作成には Bootstrap5.1.3 フレームワークを使用していることに注意してくださ...
から 2024-04-01 23:49:58
0
1
372
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート