アイコン型WebフォントをCSSでデザインしたボタン10個
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説 初心者向けにCSSだけで矢印のアイコンを作る方法について解説しています。画像を使わずにCSSで矢印を作れるようになればサイト制作にも役立つはずです。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自
369種類のアイコンを簡単設置｜WPプラグイン WordPress Visual Icon Fonts
Home プラグイン, 機能拡張・カスタマイズ, 記事編集 369種類のアイコンを簡単・自由に設置。WPプラグイン「WordPress Visual Icon Fonts」 プラグイン概要 本日は369種類もの「アイコン」を簡単に設置するためのWordPressプラグイン「WordPress Visual Icon Fonts（ワードプレス・ビジュアル・アイコン・フォンツ）」をご紹介したいと思います。 アイコンの種類は、FBやTwitterなどのWeb/ソーシャルメディア系アイコンから、各種記号、レストランなどのマークなどまで幅広く揃っています。 プラグインをインストールすればすぐに使うことができる上、アイコンのサイズ・カラー変更もOK。ブログであれ、HPであれどこにでも設置可能です。 また、このようなプラグインは一般的にショートコード（短縮コード）を使ったり、コードを直接書き込むものが多
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
お問い合わせ/FAQ/メールアイコン|商用利用可のWEB素材が無料な素材屋
「商用利用可のWEB素材が無料な素材屋」ではホームページ制作の為のWEB素材を無料配布中。アイコン、ボタン、バナーなどのフリーWEB素材を、ネットショップから企業サイト、ビジネスサイトや商用サイトなどのホームページ制作だけではなくブログ制作にも使用いただけます。素材利用の使用報告などは必要はありませんのでお気軽にご利用下さい。
全133種類ちょっとレアなのもある、16x16のミニサイズのアイコン素材 -Small Ui Icons
アロー、検索、ホーム、メール、ソーシャルメディアなど、ウェブサイト・アプリケーション用のさまざまな種類が揃ったミニサイズのアイコン素材を紹介します。 メガネとかヘッドフォンとかハンガーとか、ちょっと変わったものもあります。
CSSで外部サイトへのリンクの後ろにアイコン画像を表示する
CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。 外部サイトへのリンクの識別法 以下のようにすればリンクの後にアイコン画像を表示されます。 a { background:url(画像のURL) no-repeat right center; padding-right:15px; } これだとすべてのリンクに画像が表示されるので、外部リンクと内部リンクを識別する必要があります。 URLで識別する a[href^="http"] { background:url(画像のURL) no-repeat right center; padding-right:18px; margin-right:5px; } a[href^="http://weboook.blo
商用利用可の無料フリーアイコン素材サイトまとめ ：帳：So-netブログ
Web/ホームページを制作する時にあると助かる無料アイコン素材サイトの紹介です。さらにその中で「ライセンスフリー・商用利用可、ビジネス利用可」で、許諾不要のサイトのみに絞ってみました。 使用条件の変更がある場合考えられますので、使用前に利用規約の確認をお願いします。 ※2010/12/31 3サイト追加。 ※2011/06/02 3サイト追加。 ※2013/01/25 3サイト追加。 アイコン素材の0円のweb素材屋さん http://www.image-seed.com/ ランキング、リスト、new、オモシロ系、数字・アルファベットアイコン、ビジネス系アイコン、コメント枠、ボタン・メニュー、看板、壁紙など。WEBデザイナーさんが作っているみたいなのでトレンドを抑えた綺麗な仕上がりのアイコンが多いです。 デザイン素材.com http://designsozai.com/ 矢印、メール、ホ
webデザインに必要なアイコンが全て揃うアイコンセット「500+ web icons pack」
ページ移動が必要なwebページを快適に閲覧してもらうために重宝する素材アイコン。WEBサイトの内容によっては、分かりやすく表現するために多くの種類のアイコンが必要になります。そこで今回紹介するのが、webデザインに必要なアイコンが500個もまとめられたアイコンセット「「500+ web icons pack」です。 上記のとおりシンプルで使いやすいデザインのアイコンセットとなっています。 詳しくは以下 「500+ web icons pack」には、ホームや設定・電話などを表す一般的なUIを示すアイコンはもちろん、大型ショッピングモールに表示されているような案内アイコン、ビジネスシーンで使いやすい時計やグラフを示すアイコンなど、生活のあらゆる状況がアイコンとしてセットになっています。 シンプルなシルエット素材になっているので、流行などに関係なく利用できるというのが嬉しいですね。PSDデータ
famfamfam.com: Silk Icons
“Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that. Current version: 1.3. View all icons (.png file, 1Mb) Download License I also love to hear of my work being used, feel encouraged to
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iconizer.net | Free icons generator
favicon.ico（ファビコン）の作り方 | IDEA*IDEA
サイトデザインに合ったソーシャルアイコンを探す際に便利なエントリ:phpspot開発日誌