アイコンフォントを作ったのでオープンソース化して GitHub と npm に公開しました | WP-E (仮)
こんにちは。EXP ひのたんです。 最近アイコンフォントを作って GitHub と npm で公開したのでその紹介記事です。 feathericon Web サイト: http://feathericon.com/ GitHub: https://github.com/featherplain/feathericon npm: https://www.npmjs.com/package/feathericon 名前は私の Web 上のハンドルネームである「featherplain (フェザープレイン) 」と icon を合わせた 「feathericon (フェザリコン) 」です。 アイコンフォントと言えば Font Awesome や GitHub の Octicons のアイコンフォントの巨人がすでに存在します。Web フォント化していなくとも、「vector free icons」
CSSのみでアイコンを表現できる「icono」
さまざまなデザインアイコンが配布されており、制作している環境に合わせて使い分けるために、aiやpsd、png、svgなどダウンロードできる形式もさまざま。そんな中今回は、webサイト構築時にそのまま利用できる「icono」を紹介したいと思います。 CSSのみでアイコンを表現できる、クラスを指定するだけで表示が可能な、非常に便利なアイコンセットとなっています。 詳しくは以下 CSSなので、色を変えるといったカスタムをすることも簡単。種類は全部で100種用意されており、ファイルやガジェット、メニュー、チェックやフェイスなどといったベーシックなタイプがラインナップされているので、定番アイコンとしていろいろなシーンで活躍してくれるのではないでしょうか？ これを使えば、画像配置よりも簡単にアイコン表示が可能となり、デザイナー側との連携を上手に行うことで制作の効率化が図れるかもしれません。是非一度、導
Material Design Fonticons – GoogleマテリアルアイコンのWeb Font版
マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。 そこでGoogleもアイコン集を提供しているのですが、これはPNGまたはSVGです。Material Design FonticonsはそれをWeb Fontとして提供します。 Material Design Fonticonsの使い方 基本的にGoogleのマテリアルデザインアイコンと変わりません。 Material Design FonticonsはWeb Fontなので一つのファイルで表示サイズにこだわることなく利用できます。アプリであればGoogleの画像ベースであっても自動的に選択を変えてくれますが、WebアプリケーションならばMaterial Design
Material Icons Guide
This page has moved to developers.google.com/fonts/docs/material_icons.
Devicons | The developer's iconic font
Meet Devicons, an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.
inuicon – pplogの中で使われているアイコンフォント（Web Font）
最近は画像でアイコンを表示する代わりにWeb Fontを使うケースが増えてきました。Font Awesomeをはじめとして、公開されているものを使うのは容易ですが、自分のために新規で作成するというのは難しい印象があります。 そんな中、参考にしてみたいのがinuiconです。pplog.netの中で使われているアイコンフォントになります。 inuiconの使い方 こちらがフォントです。かわいいアイコンですね。 下にあるのがすべてのフォントです。 種類はそう多くありませんが、pplogの中で使う分には十分なのでしょう。今後、pplogの中で使いたいアイコンが増えたら、IcoMoonが拡充されていくと思われます。自分たちのWebサイト、アプリで使うアイコンをフォントとして管理するというのは面白いアイディアですね。 また、inuiconはRailsでも使えるgemも公開されています。Railsプロ
もうシンプルアイコン探しには困りたくない！フリーのシンプルアイコンを厳選26選！ | バンクーバーのうぇぶ屋
毎日英語圏のWEB系ブログをチェックしていると、毎週必ず何かしらのアイコン系の記事を見るんですよね。バンバン新しい物が出てきて、その度に『アイコン』のタグを付けてブックマークするわけですが、もう600記事近い程のアイコン関連のブックマークがあって意味分からない状況になってたりするわけです。 というわけで、今日はそんな僕のアイコン関連ブックマークの中から『シンプル アイコン』というタグで絞って、更にその中から「これはクオリティ高いなぁ」とか「凄い使えそうだなぁ」とか思った物だけを幾つか厳選して共有させて頂こうと思います！目についた物からご紹介させて頂くので順不同です！コレを機に少しずつ整理していこーっと。 数が数なので大変かもしれませんが、皆さんこういったフリー素材を使う時は必ずライセンスを確認するように気をつけてください。中にはサイトに明記して無くてもダウンロードファイルの中にReadme
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
iconmonstr - Free simple icons for your next project
To use this icon, you must first accept the license agreement.
ミニ・ソーシャル・アイコン -Blog //ヴォルフロッシュ
Published on 2011-10-22 RSS ミニ・ソーシャル・アイコン 本アイコンセットの最新版はミニ・ソーシャル・アイコン -Worksにあります。 54 pieces of social icons 小さいアイコンはかわいい。 ということで小さいアイコン配布第3段。いわゆるソーシャル・サービス系のミニアイコンです。web素材的な。 いや、なんてことないんだけど、こういうのってフォーマット揃えたいじゃん？ 並べたときに各社バラバラだとなんか落ち着かない。だから揃えられるように沢山作ってみました。自分のプロフィール・ページとかブログのソーシャル・ブックマークに使えそうなのを欧米系サービス・国内サービス取り混ぜて42 54個。 サイズは20x20(px)。ドロップシャドウ付きのヴァージョンはマージンが周囲1px取ってあって、画像のサイズ自体は22px四方です。うん、ちょうど小さい
パス画像をFontに変換！「icoMoon」を使ってみた。 | バシャログ。
1月が終わってしまいましたね～！春が待ち遠しい、seki です。 今回は、今まで画像として書き出して使っていたピクトグラムなどのパス画像を、フォント形式で吐き出してくれるサービス「icoMoon」のご紹介です。一度自分で作ってみたくてウズウズしてました。詳細は以下より。 作り方について 参考サイト→http://webamb.com/web_service/773.html はい！こちらの記事にとても分りやすく紹介されています！ とりあえずその通りにやってみましょうか。 1. Fireworksでまずは元となるアイコンを作る パスツールを使ってサクサク。よくメニュー周りなどで使えそうなものを作ってみました。 無心で作りすぎたせいであまり統一性がありませんが、参考までに。 塗りは黒ベタで。もし描くのが難しいという方は、フリー配布されているアイコンから持ってきても良いかと。 もちろんイラレで作
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
大分 ホームページ制作｜CONDENSE Inc.
デザインで人と人をつなぎ、社会活動を活性化させ、その結果日々の暮らしが守られる。 そんな現代社会の縁の下の力持ちとしての役割がデザインにはある。 夢のため、目的のため、生きるため。 私たちが少しでもあなたのお役に立てたなら、とても嬉しく思います。 詳しく見る
Web Icon Fonts | chibatch.jp
Web Icon Fonts Webフォントで使えるアイコンセット。IE8以下では使えないです。iOS4.1以下も多分見られない。 _Download(35KB) @font-face{ font-family: 'WebIconFonts'; src: url('WebIconFonts.woff') format('woff'), url('WebIconFonts.ttf') format('truetype'); } .icon { font-family: WebIconFonts; } Arrows !Back! 1Back1 #Forward# 3Forward3 $Up$ 4Up4 %Down% 5Down5 &Done& 6Done6 'Close' 7Close7 (Plus( 8Plus8 )Minus) 9Minus9 Social Networks AAmazon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「はてな」「LINE（ライン）」など、SVGのフリーアイコンを作っていただいたのでシェアします
GitHub - google/material-design-icons: Material Design icons by Google
Octicons Your project. GitHub's icons.
Icons | Font Awesome
Placehold.it - Quick and simple image placeholders