CSSでボタンにアイコンを追加する方法-CSSチュートリアル-php.cn

CSSでボタンにアイコンを追加する方法

藏色散人

リリース： 2020-12-22 09:50:06

オリジナル

7232 人が閲覧しました

CSS でボタンにアイコンを追加する方法: 1. ページ上のフォントアイコンファイルを参照し、フォントアイコンをボタンに直接追加します。 2. ボタンフレームを使用し、フロートをクリアします。「overflow:hidden」属性を使用するだけです。

CSSでボタンにアイコンを追加する方法

#このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨事項: 「

css ビデオチュートリアル」

CSS を使用してアイコン付きのボタンを作成する

まず、レンダリングをアップロードします

CSSでボタンにアイコンを追加する方法 #これは、小さな検索アイコンが付いた検索ボタンです。書かれた CSS は IE6 および IE7 とあまり互換性がありません。四辺の角丸部分はCSS3のプロパティを使用しています。

1. フォントで小さなアイコンを作成します

上の検索アイコンは、icomoon という Web サイトを通じてオンラインで生成されました。この Web サイトは海外にあるため、国内のアクセスは比較的遅いです。プロキシまたは回避ツールを使用してください。上がるのが早くなります。 Web サイトは次のとおりです。

CSSでボタンにアイコンを追加する方法 #一連の選択を行った後、[ダウンロード] をクリックすると、フォントファイルと CSS デモが表示されます。

# # 自動的に生成されます CSSでボタンにアイコンを追加する方法 #独自のファイル内で引用すると非常に便利です:

@font-face {
    font-family: &#39;icomoon&#39;;
    src:url(&#39;fonts/icomoon.eot?-fl11l&#39;);
    src:url(&#39;fonts/icomoon.eot?#iefix-fl11l&#39;) format(&#39;embedded-opentype&#39;),
        url(&#39;fonts/icomoon.woff?-fl11l&#39;) format(&#39;woff&#39;),
        url(&#39;fonts/icomoon.ttf?-fl11l&#39;) format(&#39;truetype&#39;),
        url(&#39;fonts/icomoon.svg?-fl11l#icomoon&#39;) format(&#39;svg&#39;);
    font-weight: normal;
    font-style: normal;
}
.ficomoon{font-family:&#39;icomoon&#39;;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.icon-search:before {content: "\e601"}

ログイン後にコピー

2. ボタンフレーム

簡単さと便宜のために、a タグをボタンの最外層

<a href="#" class="btn_green">
        <font class="icon_pre ficomoon icon-search"></font>
        <font class="icon_next">筛选</font>
</a>
.btn_green{
    text-decoration:none;
    display:inline-block;
    color:#fff;
    overflow:hidden;
    vertical-align:middle;
    font-size: 1em;
    line-height: 1.4;
}

ログイン後にコピー

1. a タグの line-height は高さをサポートするために使用されます。これが追加されていない場合、次の状況が発生します:

CSSでボタンにアイコンを追加する方法 line-height の原理の概要については、オンラインで閲覧できる資料がたくさんありますので、必要に応じて学習してください。

2. overflow:hidden は float をクリアするために使用されます。

3. ボタンの内容

レンダリングからわかるように、ボタンは左右の部分に分かれています。

左側の部分は次のとおりです。

<font class="icon_pre ficomoon icon-search"></font>
.icon_pre{
    padding:8px 15px;
    border-right:1px solid #c9e7de;
    background:#69bda4;
    border-radius:4px 0 0 4px;
    float:left
}

ログイン後にコピー

border-right は分割線を表示し、コードの残りの部分はフォントアイコンを表示します。

右側の部分は次のとおりです:

<font class="icon_next">筛选</font>
.icon_next{
    padding:8px 30px;
    background:#69bda4;
    border-radius:0 4px 4px 0;
    float:left
}

ログイン後にコピー

両方の部分で float が使用されています。この属性は使いたくないのですが、使用しないと大きなギャップが生じます真ん中に。また、font はインライン要素なので、padding-top や padding-bottom は無効です。

CSSでボタンにアイコンを追加する方法 float を使用した後、フォントをブロックレベルの要素に変更してパディングを有効にし、2 つの要素を隙間なく隣接させることができます。

フローティング原理についてはインターネット上に多くの説明があり、それを理解する必要があります。

以上がCSSでボタンにアイコンを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。