The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。 1. Font Awesomeとは? ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
ブラウザのタブやアドレス欄には16pxサイズや32pxサイズで表示されることが多く、個人的には最低限その2つがあれば十分なのかなという気がします。 ちなみに必要な大きさのファビコンが用意されていない場合は、既に用意されているアイコンを、ブラウザやOSが自動的に拡大・縮小して表示させます。 実はここで挙げた他にもたくさんの種類があり、近年デバイスの多様化によって、ファビコンの種類もかなり複雑になってきました。 最近では20種類以上もあると言われています。 そんなにいろんなサイズのファビコン作るのはかなり大変ですし、数を聞いただけでも嫌になりますが、色んなサイズのファビコンを一括生成できる便利なツールがあります。(後述) ファビコンを作ろう ファビコンを作成する際、まずはデザインを考えなければいけません。 小さいサイズだと16pxですが、たった16pxの大きさでも、一目でどのWebサイトかわか
Warning! Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names. All brand icons are trademarks of their respective owners. The use of these tradema
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Glyphicons Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
デザインの素材として欠かすことができないアイコン。良いものをみつけるたびにストックされているデザイナーの方も多いのではないでしょうか。今回はそんなストックコレクションにぜひ取り入れたいフリーアイコンセット「Emojious Icons」を紹介します。 キャラクターのような可愛らしさを兼ねそなえた、個性的なラインナップを楽しめるアイコンセットとなっています。 詳しくは以下 アイコンとして定番でよく見かける、よく使う、という感じの種類は入っていないのですが、popでカラフルなアイコンが揃っており、デザインを華やかで楽しげに彩ってくれそう。蛍光カラーをミックスした独特なカラーリングも、他にはない特徴ではないでしょうか。可愛らしい表情も印象的です。 ダウンロードできるのは、SVG、AI、PNG形式。デザインする媒体に合わせて使い分けることができる便利なラインナップですね。気になった方はぜひこの機会
当ブログでもたくさんの無料アイコンを紹介してきましたが、自分にぴったりのアイコンを探すのはかなり大変だと思います。85,000個以上の高品質なアイコン素材を自由にカスタマイズしてダウンロードできる新しいIcons8を紹介します。 下記のようにカラー変更は当たり前、要素を加えたり、文字入れしたり、さまざまなカスタマイズに対応しています。SVGも完備されているので、重宝しますね。 Icons8 beta Icons8の使い方 無料で利用できるアイコンはなんと、85,000個以上 Icons8の使い方 Icons8の使い方は、簡単です。 さまざまな機能が用意されていますが、直観的にすべてを利用できると思います。 アイコンの選択から、カスタマイズ、ダウンロードまでざっと説明します。
ベクターデータで配布されている、かわいいアイコンセット「Autumn Kawaii Icon Set (50 Icons, SVG & PNG)」 自分自身を表現するシーンで自分の分身となるアバター。様々なタイプのアバターが世の中には溢れていますが、今回紹介するのはベクターデータで配布されている、かわいいアイコンセット「Autumn Kawaii Icon Set (50 Icons, SVG & PNG)」です。 このアイコンセットは全部で50種類ものアイコンがセットとなっており、雲や紅葉、りんごなど秋を感じるアイコンがセットになっています。 詳しくは以下 ベクターデータでダウンロードができるため、カスタマイズを含めて多くのデザインに活用できそうなアイコンセットです。シンプルな作りなのでベースとして、色々なデザインやツールを作ってみるのも良いかもしれませんね。 「Autumn Kawai
海外の素材だとちょっと不安という人でも大丈夫、日本人クリエイターが作成した商用無料で利用できるアイコン素材を紹介します。 アイコンは現在400種類以上あり、高品質で汎用性の高いものが揃っています。SVGも完備されているので、非常に使い勝手がよいと思います。 Icon Box アイコンの利用にあたっては個人でも商用でも無料で、「アイコンの編集もご自由にどうぞ」とのことです。アイコン自体の再配布は禁止です。 詳しくは、ライセンスページをご覧ください。 アイコンのフォーマットは、下記の通り。 透過PNG SVG サイズは、16px, 32px, 64px, 128px, 256pxが用意されています。 ダウンロードも簡単で、登録など面倒なことは一切不要です。各アイコンページの「PNGボタン」「SVGボタン」からダウンロードできます。
<div class="menu cross menu--1"> <label> <input type="checkbox"> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="30" /> <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" /> <path class="line--2" d="M0 50h70" /> <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" /> </svg> </label> </div>
なかなか珍しいアイテムがデザインされた有料のアイコン素材が、1週間限定で無料でダウンロードできるので紹介します。 写真関連、デザイン関連、プログラミング関連、セキュリティ関連、ショッピング関連など、260種類のカラーアイコンと260種類のモノクロアイコンが揃っています。
夏の今だからこそ使いたい夏をモチーフにしたアイコンまとめ「Free Icon Sets for Summer 2018 that will Heat up Your Designs」 7月に入り本格的に夏の到来を感じるこの頃。夏をテーマにしたデザインを手がける機会も増えてきたのでは無いでしょうか?今回ご紹介するのは、そんな今の時期だからこそ使いたい夏をモチーフにしたアイコンまとめ「Free Icon Sets for Summer 2018 that will Heat up Your Designs」です。 Summer Sales 50 free icons (SVG, EPS, PSD, PNG files) デザインに夏らしさを取り入れたいときに便利な、夏を連想させるモチーフのアイコンが全部で9種類紹介されています。さらにその中からいくつかおすすめのものをピックアップしましたので、
先日の記事「Chrome 67でアップデートされたデベロッパーツールの新機能」で、「ケバブって言うんだ」という声が聞こえたので、メニューでよく使用されるアイコンの名称を紹介します。 横3本線のアイコンはほとんどの人が「ハンバーガー」で通じるでしょう。横3つのドット、縦3つのドットは、何て呼んでますか? 特に名前は使わない、別の呼び方をしているなどありましたら、教えてください。 CSS Menu Icon Animation ちょうど、スマホアプリのメニューで使用されるアイコンのデモにもそれらの名称が使用されていました。これらはクリエイターの遊び心で名付けられたもので、公式な名称ではありません。 私は最初、この呼び方を下記のツイートで見た記憶があります。 Don't ever say you don't have choices on mobile. pic.twitter.com/Atu3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く