The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
Icons | Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
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
Tool to build custom fonts with icons.
「ビジネス」「コミュニケーション」「コンピューター＆モバイル」「デザイン＆ライティング」など14のカテゴリーに分けられたアイコンフォント1000個以上が無料でダウンロードできるのが「WebHostingHub Glyphs」。アイコンはPNG形式、TFF形式の他、ウェブフォントとしても使用可能です。 WebHostingHub Glyphs http://www.webhostinghub.com/glyphs/ ダウンロードは右端の青とオレンジ色のボタンから行います。なお、青色の「DOWNLOAD ALL ICONS IN ONE FONT」からはTTF形式とウェブ用のアイコンフォントをダウンロードでき、オレンジ色のボタンからはPNG形式のアイコンがダウンロード可能。 アイコンフォントは「ビジネス」や「コミュニケーション」など14のカテゴリーに分けられています。以下はビジネスカテゴリーの
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
CONDENSE-iconFont
A A B B C C D D E E F F G G H H I I J J K K L L M M N N O O P P Q Q R R S S T T U U V V W W X X Y Y Z Z a a b b c c d d e e f f g g h h i i j j k k l l n n m m o o p p q q r r s s t t u u v v w w x x y y z z 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 ! ! " " # # $ $ % % & & ' ' ( ( ) ) * * + + , , - - . . / / : : ; ; < < = = > > ? ? @ @ [ [ \ \ ] ] ^ ^ _ _ ` ` { { | | } } ~ ~ Ä Ä Å Å Ç Ç É É Ñ Ñ Ö Ö
Import your own SVG icons Thousands of free vector icons Select the icons you need Generate fonts, sprites, etc. Learn More →
ブログでも企業サイトでもよく見かける310種類のアイテムを美しいエレガントなラインで描いたアイコンフォントを紹介します。 Webフォントとして利用できるので、サイズやカラーなど変更しても美しいまま利用できます。.pngも入ってるので、画像で利用してもOK。 Elegant Icon Font ダウンロードできるアイコンのフォーマットは3種類。 フォント（.ttf, .woff, .eot） ベクター（.svg） 透過PNG（.png） Webフォント用のHTML/CSSも用意されているので、初心者も簡単に実装することができます。 アイコンのアイテムは全部で、310種類！ アロー、サーチ、ホームなど、よく利用するものをはじめ、ショッピングカート、タグ、クリップ、インフォーメーションなど、さまざまなものが揃っています。 以下、アイコンの全種類です。 ますは、ソリッドなラインでデザインされたもの
昨日、Appleが｢Mac｣の誕生30周年を記念し、特設サイト｢Thirty Years of Mac｣を公開しましたが、同サイトにはMacアイコンフォントが隠されており、フォント自体がダウンロード可能である事が分かりました。 Macアイコンフォントは全部で62のMacをデザインしたフォントとなっており、こちらからダウンロード可能で、Font Bookからインストールすることで利用可能です。 ［via 9 to 5 Mac］
DOMAIN ERROR
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。
無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんはじめまして！ アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
関西フロントエンドUG 主催の「フロントエンドで考えるWebデザイン/UI勉強会 (http://kfug.connpass.com/event/15244/ )」で発表した内容です。
営利・非営利問わず自由に使用することが可能で、ウェブフォントとしても利用OKというTrueType/OpenType/WOFF/EOT形式のフォントが「CONDENSE-iconFont」です。下記サイトの一番下にある「DOWNLOAD」をクリックすればダウンロード可能となっています。 CONDENSE-iconFont http://icon.condense-c.com/ 実際にどのようなフォントがあるかというと、こんな感じです
こんにちは。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」
Icons | Font Awesome
Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.
Open source icons. Lovingly hand-crafted.Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG. Completely open source, MIT licensed and built by Ionic. No results for ""Not finding an icon that you want? File an issue and suggest a new icon.
スクリプト無しで、コンテンツをスライドさせ、横からアニメーションで表示されるナビゲーションを実装するスタイルシートを紹介します。 このオフキャンバスのスタイルも少しずつ確実に進化してますね。 デモのアニメーション スライドの切替にはチェックボックスを使われており、ナビゲーションが表示される際には各アイテムが異なるタイミングでアニメーションします。 HTML コンテンツエリアはsection要素で、そこにナビゲーション表示のトグルとなるチェックボックスのラベルを配置します。ナビゲーションは、普通にリスト要素で実装します。 <div id="wrapper"> <div class="mobile"> <!-- トグルとなるチェックボックス --> <input type="checkbox" id="tm" /> <!-- ナビゲーション --> <ul class="sidenav"> <
WebHostingHub Glyphs
Glyph Icon Font from WebHostingHub High quality icons that are easy to use with Bootstrap, other CSS frameworks and in any web projects. They also work in desktop software such as Adobe Photoshop or Microsoft Word. They are perfect for use in mobile developement on Android or iOS devices. Icons rock when used as a font! Font gives you freedom to change icon's size, color, shadow and other things o
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
素早く制作できた！Web制作に役立つトレンドのツール一覧
作成：2014/12/22 Web制作 > 2014年、WPテーマやコーポレートサイト作成時にお世話になったツールと2015年に使いたいツール。素早くコーディングを行うために知っておきたいツールをメモ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ CSS ツール １．CSS スニペット ２．CSSアニメーションサンプル ３．背景を様々な形に切り抜く ジェネレーター ４．SCSS/CSSに変換するツール ５．CSS フレームワークとチートシート ６．CSS3 アイコン ７．CSS / JS / HTML コード整形 ８．レスポンシブ モックアップ作成 ９．ブラウザ対応表 SVG / ロングシャドー / ポリゴン作成 １０．SVG ブラウザサポート状況確認表 １１．SVG ローディングアニメ作成 １２．SVG 背景作成ジェネレーター １３．SVG パターン背景
Google Design
The past, present, and future of personal expression through fonts
Typicons are free-to-use vector icons embedded in a webfont for easy use in any UI, whether it be on the web or in a native app. Typicons are free-to-use vector icons embedded in a webfont for use in your user interfaces, whether it be on the web or in a native application. The set of icons are available on Github, with everything included from the source files in SVG format to the minifed CSS. Yo
Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
Sassを使って時間短縮！アイコンフォントを手軽に使える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する
Metrize Icons • 300 Icons for Designers & Developers
Free Collection of 300 Metro-Style Icons for Designers and Developers. Metrize Icons is a free icon set, it works perfectly for your apps or web projects. You may use these icons for both commercial and personal projects and customize them any way you like. All Icons, WebFont and Updates are Free. The download includes: PSD (Single Shape Layer) SVG (Single Icon 512 x 512) EPS AI PDF Web Font The b
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。 前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。 ※このスライドは、2014年5月15日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol10/Read less
安全でアクセシブルなアイコン・フォント
Translation of: Bulletproof Accessible Icon Fonts by Filament Group アイコン・フォントを利用する場合、あらゆるユーザーに適切にアイコンを提供しようとすると、かなり気をつける必要があります。そのフォントが読み込まれなかった時にどうなりますか？@font-faceがまだサポートされていないブラウザーでは？ どうすれば安全に(bulletproofに)アイコン・フォントを利用できるかをこれから解説したいと思います。 効率的で機能的なウェブサイトを制作するという、この終わることのない探求において、ベクター形式のアイコンを提供する手段として、簡便であるフォントを利用することが何度も提案されてきました。対して私達は通常ベクター形式のアイコンとしてSVGをIan Featherがブログ書いたような理由から選んで(また、薦めて)おり、既に
ちょっと意識高そうなタイトルを付けてしまいましたが、皆さんどのような開発でお過ごしでしょうか。 Nagisa では現在フロントエンドエンジニアは1人です。長きに渡って1人で開発してきましたが、最近は iOS エンジニアやデザイナーも開発に参加することでスピードとクオリティを担保しています。 そこで今回はスキルや役割の違うメンバーで効率よく開発を進める。そしてコードをカオスに落とさず秩序を保つために行ったワークフローの改善や、取り入れたデザインパターンなどを紹介したいと思います。 複数人でチームを組んで開発をするのは、1人のときよりも難しいです。雰囲気で開発を進めていけばコードはカオスに陥り、スピードも品質も担保できなくなります。 他人のソースコードを引き継いだ時や3ヶ月前の自分 (殆ど他人) のコードを改修している時も似たようなことが起こります。 逆に、1人で開発して1人で継続的にメンテし
CONDENSE-iconFontWebでよく使... / Ligature Symbols200種以上のア... / Web Icon FontsはてブやGree、モ...他...全4件
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. If you’re building an icon system for a site, you have some options. If you know the icons need to be raster images, then you’ll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options ar
![Inline SVG Vs Icon Fonts [CAGEMATCH] | CSS-Tricks](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3413d27979db9730c62af2cea80b93bff45d129/height=288;version=1;width=512/https%3A%2F%2Fcss-tricks.com%2Fwp-json%2Fsocial-image-generator%2Fv1%2Fimage%2F168417)
The Elegant Icon Font - 360 Of The Best Free Icons For The Modern Web
Icon fonts are great because they are flexible and fast loading. Using a single font and CSS, you can create countless graphical variations that would normally require the use of an equally countless collection of bulky and non-scalable images. Combined with HTML elements, these icons can even turn into beautiful buttons like the download link above! How to Use the Elegant Icon Font on Your Websit
【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
はじめに みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 前「【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応」はマインクラフトネタでフォントの作成について紹介しました。 今回は、作成したフォントをWebフォント化して読み込んでみたいと思います。 前回作成した匠顔フォントはこちら Creeperフォントをダウンロード 1，Webフォントについて 少し古いですが詳しい解説はこちらの記事「Webフォントについて調べてみた」をどうぞ。 一部抜き出して紹介します。 1.1，Webフォントとは CSS2.1時代、Webサイト上で利用できるフォントはユーザーのローカル環境にインストールされているフォントに限られていました。Mac、Windows PC共通のフォントは無いためデザインにも大きな制約がありました。デザインフォン
見慣れたウェブアイコンをフリーフォントにした「CONDENSE-iconFont」（無料） | ライフハッカー・ジャパン
「CONDENSE-iconFont」はウェブアイコンをフォント化したものです。フォルダやカレンダー、鍵マークなど、ウェブでよく利用されるアイコンがフォントになっており、無料でダウンロードできます。 詳細は以下より。まず「CONDENSE-iconFont」へアクセスします。 このように各アルファベットにアイコンが割り当てられています。最下部にダウンロードリンクがあるのでダウンロードしてみましょう。ダウンロード後、フォントをインストールすると利用できるようになります。ウェブ製作の際など、ちょっとした遊び心も加えられそうですね。 ライフハッカーではこれまでにもフォントについての記事をいくつか紹介してきました。「自分の手書き文字で英字フォントが作れる無料サービス」「自分のPCにインストールされているフォントのプレビューをWEB上で行えるサイト」「無料で使えるGoogleウェブフォントのクイック
Elusive icons, an icons font designed for use with Bootstrap
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other "attribution" claws. If you don't care much about licences there are many alternatives you can use, most notably the font-awesome font. When d
こんにちは。太朗です。 最近案件で使ったアイコンフォントが便利だったのでご紹介致します。 アイコンフォントのメリット スプライト画像はちょっとした色やサイズの変更も画像なので面倒ですよね。アイコンフォントを使えば色やサイズをCSSで自在に編集できるのでメンテナンスがかなり楽ちんです。なお、ベクターデータなので高解像度デバイスにも対応できます！ アイコンフォントをgulpで作る では、どうやってアイコンフォントを作るのか？作り方は色々ありますが、一番手っ取り早いのはgulpで自動で生成させることです。なおgulpのインストールなどは省略させてもらいます。 以下がgulpファイルの例です。 gulp.coffee 'use strict'; gulp = require 'gulp' $ = require('gulp-load-plugins')() # svg を圧縮する gulp.tas
公開日 : 2015年12月17日 (2024年7月17日 更新) カテゴリー : アクセシビリティ この記事は、「Web Accessibility Advent Calendar 2015」の17日目のエントリーです。 ウェブデザインにおいて、アイコンを配置することは多いと思います。特にここ数年はアイコンフォントを採用する案件が個人的に多かったこともあり、「アイコンフォントのアクセシビリティ向上」という記事を書いたりもしました。 ところがアイコンフォントにはもっと根本的なアクセシビリティ問題があるという指摘もあります。たとえば以下の記事が参考になるでしょう。 PUAアイコンフォントのアクセシビリティ - Unreviewed Seriously, Don’t Use Icon Fonts - Cloud Four Blog 総じて言うと、アイコンフォントは、本来テキスト (文字情報)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fontello - icon fonts generator
無料で1000個以上のアイコンフォントがダウンロードできる「WebHostingHub Glyphs」
SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon
全310種、美しいソリッドなラインで描かれたかわいいアイコン素材 -Elegant Icon Font
AppleのMac30周年記念サイトにはMacアイコンフォントが隠されている事が判明 | 気になる、記になる…
数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ
Kaizen Platform における UI ライブラリのワークフロー
無料で商用可のウェブでよく使われるアイコンをフォント化した「CONDENSE-iconFont」
アイコンフォントを作ったのでオープンソース化して GitHub と npm に公開しました | WP-E (仮)
Ionicons: The premium icon pack for Ionic Framework
[CSS]かっこいいアイデアが盛り込まれた横からスライドするナビゲーション
Typicons - A Free Icon Font by Stephen Hutchings
意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
シンボルフォント — それは、新しい画像形式
フロントのチーム開発効率を最適化するワークフローと SPA 設計 | Nagisaのすゝめ
使うならやっぱり国産！使い勝手のよい国産のアイコンWebフォント
Inline SVG Vs Icon Fonts [CAGEMATCH] | CSS-Tricks
sprite画像はもう終わり？gulpでIcon Fontをつくろう！ | Goodpatch Blog
アイコンフォントか？ SVG アイコンか？ | Accessible & Usable