input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
全133種類ちょっとレアなのもある、16x16のミニサイズのアイコン素材 -Small Ui Icons
アロー、検索、ホーム、メール、ソーシャルメディアなど、ウェブサイト・アプリケーション用のさまざまな種類が揃ったミニサイズのアイコン素材を紹介します。 メガネとかヘッドフォンとかハンガーとか、ちょっと変わったものもあります。
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
ソーシャルアイコンを画像ではなくWebフォントで表示する際の備忘録 | なまら春友流
Webフォントはクライアントにインストールされていないフォントも表示してくれるという優れもの。 サイトの表現の幅が広がるし画像を使うわけではないのでSEO的にもいいのかな。 SNSのアイコンもWebフォントにするとマウスをのせた後の処理などもしやすい。 導入も簡単。ん？簡単？？？ いや、難しかったっすｗ ってことで知ってる人には簡単だと思うけれど、私には敷居が高かったので備忘録として。 AGENDA Webフォントって？ Webフォントの使い方 Webフォントのダウンロード Webフォントのアップロード 実際に表示させてみるための準備 Firefoxだけ表示されない 1. まずWebフォントって？ Webフォントを使う際におさえておきたい5つのポイント – フォントブログ 意外と知らない？アイコンはWebフォントでつくるとこんなに便利！ | KAYAC DESIGNER’S BLOG –
シンプルなフリーのアイコンのまとめ、発見次第追加中 ｜ ハッケンブログ（発見部LOG）
単色アイコン、ピクセルアイコン、グレーアイコンなど、シンプルなフリーアイコンのまとめ。 シンプルリストアイコン Free Icons - Axialis Software: 基本全部シンプル。サイズは16x16、24x24、38x38。200を越すアイコンセットが沢山あります。ICO、PNG、GIFでダウンロード可能。 1,540 inFocus Simple White Social Media Icons – Sidebar Edition | WebTreats ETC 154個の全10色で1540個の膨大なアイコンセット。サイズは3.5MBです。 Bitcons – 120 pixel icons in various sizes and colors - Some Random Dude ダウンロードは右のメニュー「Featured downloads」から 56 Profess
無料アイコン100パック2009年版*ホームページを作る人のネタ帳
アイコンまとめ祭り。 今回は量も量なので画像は小さめ、クリックすると拡大方式を使っています。 ※無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版にて、最新の無料アイコンをご紹介しています。 無料アイコン １～１０ Free Icon Pack: Web Injection - Tutorial9 システムアイコンやRSSアイコンなどの詰め合わせ。 タグがいい感じすぎる。 mfayaz's Art Blog: FreeHand_ColorStroked icon pack オープンソースで出来たもの系のアイコン集。しかも手書き風。 IconTexto: Drink Web 2.0 各種ソーシャルサービスを空き缶アイコンにしたもの。 Freebies Aggregator: Vector Social Media Icons わざとダサめのアイコンに仕上げてある感じがいい。 H
無料で商用OKな高品質アイコン集がダウンロードできる「ArtDesigner.lv」
ウェブサイトやちょっとしたワンポイントに使える高品質なアイコン集が「ArtDesigner.lv」にて公開されています。それぞれアイコンセットはCCライセンスで配布されており、ライセンスの範疇であれば無料で利用することができます。商用利用もOKなので、助かる人は多いはず。 Lovely Website icons Pack#1 | Artdesigner.lv 中身はこのような8種類のアイコンがPNGで収録されています。 Lovely Website icons Pack#2 | Artdesigner.lv こちらも中身は8種類のPNGファイル WEB UI Treasure Chest v 1.0 | Artdesigner.lv 種類が多彩で、しかもPSDファイルで提供されています。文字などはレイヤーで重ねられているので、ほかの文字に変えたい場合にも簡単に編集することができます。 S
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
拡大縮小自由、80種類のシンプルなデザインのアイコン素材 -MimiGlyphs
サイズを自由に拡大縮小して使用できる、一つひとつ手作りされたシンプルなデザインのアイコン素材を紹介します。 MimiGlyphs [ad#ad-2] ダウンロードできるアイコンのフォーマットは、3種類。 PNG PSD CSH すぐに使いたい人はPNG、素材として利用したい人はPhotoshop用のPSD、サイズを自由に変更して利用したい人はPhotoshop用のカスタムシェイプ(CSH)、が用意されています。 用意されているPNGのサイズは、16x16です。
Free Icon Sets, Social Media Icons, Web Icons, Toolbar Icons, Icon Tools - SoftIcons.com
SoftIcons.com allows to download icon sets free of charge (at least for personal use). The catalog contains 475,655 icons/images in 2,849 sets. Popular tags: facebook, twitter, home, apple, search, photoshop, phone, folder, cloud, arrow, book, youtube, linkedin, pinterest. For information of the possibility of public use, please read the license agreement on the respective icon set. Also SoftIcons
15000ものAndroidアプリ用アイコンセット「Android icons Set」:phpspot開発日誌
Android icons 15000ものAndroidアプリ用アイコンセット「Android icons Set」 Android's UI guideline に沿ったアイコンセットが15000も公開されています アイコンセットというのは１つのテイストで揃えたいため、数があるほど使いやすいわけなんですが、15000は驚きですね。 逆に探すのに苦労しそうですが・・（＾＾；） Photoshopのvector形式で入手できるっぽいです 関連エントリ 商用利用可能なバレンタインデーのアイコンセット１０ ５００以上のモノクロ記号アイコンセット「PICOL」 綺麗なデザインのクレジットカードアイコン15個セット
小さくてかわいい１６０個のアイコンセット「160 Tiny Icons」:phpspot開発日誌
160 Tiny Icons - 365psd 小さくてかわいい１６０個のアイコンセット「160 Tiny Icons」。 次のようなアイコンセットがダウンロード可能です。種類が豊富で癖が無いので汎用に使えそうですね 関連エントリ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」 CSS3のブラウザ別対応がアイコンで超分かりやすいサイト TwitterやFacebook等、フリーで使えるソーシャルメディアアイコンセット４０ 汎用に使える４５０のアイコンセット「Nortwood icons」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
矢印・指さし・シンボル・丸数字など、さまざなピクトグラムが全部揃ってるDingbatsフォント -Erler Dingbats