iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説-CSSチュートリアル-php.cn

まえがき：これは著者自身が勉強した上での理解と整理です。間違いや質問がある場合は、修正してください。更新を続けます。

1. iconfont フォントアイコン

、上の境界線に二重線を使用し、下の境界線に実線を使用するか、逆に行うこともできます:

ホームページ

ウェブフロントエンド

CSSチュートリアル

iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説

高洛峰

Mar 04, 2017 pm 05:04 PM

まえがき：これは著者自身が勉強した上での理解と整理です。間違いや質問がある場合は、修正してください。更新を続けます。

1. iconfont フォントアイコン

私たちのニーズでは、Tmall Web サイトなどでいくつかの小さなグラフィックやアイコンがよく見られます。

iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説

これらの小さなグラフィックを写真に置き換えることができます。スプライト画像 (スプライト画像とも呼ばれます) に変換します。

スプライト画像の原理: 多数の小さな画像を 1 つの大きな画像に結合し、背景画像の位置を設定して画像を表示します。

スプライト画像の利点: 数を減らします。

スプライトは、スプライトを作成するための優れたツールです。もちろん、上の写真の空など、他の方法もあります。猫が使用するフォントアイコン iconfont ;

フォントアイコンは、名前が示すように、ベクトルアイコンとも呼ばれます。インターネット上には、多くのフォントアイコンがあります。ライブラリ、ここではアイコンフォントの使い方を紹介します:

公式ウェブサイト: http://www.iconfont.cn/

作り方は教えませんので、そのまま使ってみましょう(笑、実際には私が描いた絵は醜すぎます );

元々はその使い方について書くつもりでしたが、iconfont が再びアップグレードされ、シンボルの書き込みとマルチカラーアイコンのサポートが追加されたようです (これには SVG の知識が必要です)。公式ウェブサイトのヘルプドキュメントの画像も非常に詳しく説明されています。私が最初に使用したときに遭遇した落とし穴について書きましょう:

「コードをダウンロード」ボタンを直接見つけていただければ幸いです。さて、しばらく探してみると、デフォルトでは色とサイズを設定するように求められました。これは、フロントエンドでコードをクリックするだけです。知っている - -- 材料を入手することです (1366*768) 他に何が起こっていますか?この「コードをダウンロード」ボタンは、ウィンドウの下部にあるツールバーによって半分ブロックされています...

フォントアイコンをダウンロードすると、次のようになります。 CSS でフォントの種類を定義するときは、必ずパスを正しく設定してください

iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説

iconfont オンラインプロジェクトを使用している場合 (ファイルをダウンロードせずに)、プロジェクトメンバーが新しいアイコンも使用したい場合は、アイコンも「オンラインリンク」で更新する必要があります

ファイルをダウンロードする方法を使用する場合、使用できるのはマルチカラーのみです。フォントの色を指定して単一の色を設定します。マルチカラーアイコンを使用したい場合は、シンボルを使用してオンラインリンクを参照する必要があります; シンボルは js ファイルを参照し、フォントクラスは css ファイルを参照します
マスターは CSS を使用してさまざまな純粋な CSS グラフィックを作成しました。私がより頻繁に使用するものだけをリストします。
Triangle

メニュー（3つのバー）

、上の境界線に二重線を使用し、下の境界線に実線を使用するか、逆に行うこともできます:

コードは次のとおりです:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .menu{
                margin: 100px;
                width: 55px;
                height: 10px;
                border-top: 30px double #f00;
                border-bottom: 10px solid #f00;
                /*用border上边框双线和下边框实线，也可以反着来*/
            }
        </style>
    </head>
    <body>
        <p class="menu"></p>
    </body></html>

ログイン後にコピー

凹角

、マスターメソッド、ここをクリックして、css3属性のradial gradientradial-gradientを使用して実行します:

iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説背景画像の放射状グラデーションを設定できます: 円の中心位置、グラデーションのサイズ、グラデーションの形状、円の中心の色の幅、...、最後の色の幅;

iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説

　　代码如下：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            a{text-decoration: none;cursor: pointer;}
            li{list-style: none;}
            /*清除浮动*/
            .clearfix:before, /*:before处理margin上下重叠*/
            .clearfix:after {
                content: ""; 
                display: table;
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                zoom: 1;
            }
            
            .test{
                margin: 100px 0 0 100px ;
            }
            .list{
                margin-left: -20px;
            }
            .content{
                width: 320px;
                background: #7fd6f1;
                min-height: 200px;
            }
            .item .active{
                background: #7fd6f1;
                color: #333;
            }
            .item{
                float: left;
                margin-left: 30px;
            }
            .item a{
                display: block;
                background: #ce4be2;
                width: 80px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                color: #fff;
                border-radius: 10px 10px 0 0;
                position: relative;
            }
            .item a:after{
                content: "";
                display: block;
                position: absolute;
                right: -9px;
                 /*不知大家是否发现，在边缘处其实是有1px的变化的，弧度到最后不是很自然，这里我们其实可以把位置往里1px*/
                bottom: 0;
                width: 10px;
                height: 10px;
                 background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 /*背景图径向渐变可以设置：圆心位置，渐变的大小，渐变的形状，圆心处的颜色 宽度， ... ，结尾处的颜色宽度*/
                 /*圆心位置默认为center，我们这里设置圆心为元素左顶点和右顶点*/
                 /*渐变的大小默认为farthest-corder ,我们这里设置的farthest-side*/
                 /*渐变的形状默认为ellipse（椭圆），我们这里得设置成circle（圆形），但是宽高一样的椭圆不就是圆形么，so...*/
                 /*颜色和宽度的设置，我们在离元素宽度还有1px的时候变化，所以这里是10-1=9px；*/
            }
            .item a:before{
                content: "";
                display: block;
                position: absolute;
                left: -9px;
                bottom: 0;
                width: 10px;
                height: 10px;
                 background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
            }
            .item .active:after{
                background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
            }
            .item .active:before{
                background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
            }
        </style>
    </head>
    <body>
        <p class="test">
            <ul class="list clearfix">
                <li class="item">
                    <a href="javascript:;" >新闻</a>
                </li>
                <li class="item">
                    <a href="javascript:;" class="active">娱乐</a>
                </li>
                <li class="item">
                    <a href="javascript:;">体育</a>
                </li>
            </ul>
            <p class="content"></p>
        </p>
    </body></html>

ログイン後にコピー

　　还有很多css制作的经典图形，以后再整理吧；

　　其实，css制作的图标和图片代替的图片都很棒，根据需求吧。我更喜欢字体图标和图片的方式，效率更高，简单。

更多iconfontフォントアイコンと各種CSS小さいアイコンの詳細解説相关文章请关注PHP中文网！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7322

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします