background preloader

Icon Fonts are Awesome

Icon Fonts are Awesome
Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. Here's a large collection of more choices. For quick usage, the code is below. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="&#x21dd;"></span> Stats </h3> How To Use for Stand Alone Icons

Iconic is Becoming Awesomer Displaying Open Iconic's SVGs are a snap. Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute. SVG Sprite Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag. <head> ... Sizing icons only needs basic CSS. Coloring icons is even easier. Font Icon fonts are a great fallback for SVG—and our font is pretty great. Head Body Bootstrap Font Use Bootstrap? Foundation Font Iconic also works for Foundation and functions just like Foundation's icon font.

A roundup of great icon fonts Icon fonts are incredibly useful when designing a site, and have a huge number of advantages over regular icons. Because they are delivered as a font file and embedded like a font, these icons are easily scalable, their color can be altered live, rather than having to edit images; along with that, various effects can be added via coding, such as shadows, stroke effects, or gradients, making them far more versatile than images. Here, we will be rounding up some of the best icon fonts the world wide web has to offer, for you to use on your sites. Fico Fico is a fantastic looking font, presented on a beautiful site, which makes it a joy to download and use. The site clearly shows which letter or glyph is used for each icon, which removes the sometimes painful process of downloading an icon font only to find you have no idea where to find each icon on your keyboard, and spending precious time cycling through each key. Pixelated Entypo Uicons Iconic Sanscons Heydings Just Vector Flexi Social Icons ikoo

Coding Horror マリオデザインスタッフブログ「教えてマリオ」 今回から数回にわたってお問い合わせフォームの作り方を投稿したいと思います。いままではHTMLをやってきましたがお問い合わせフォームはPHPという言語を使っていきます。少しずつゆっくりと説明していきたいと思います。今はやりのwordpressなどもPHPを使用してあるので、お問い合わせフォームが作れるぐらいのPHPの知識が身に付けばwordpressを使うときにもすんなりと入っていけると思います。 目次 1.PHPとは? 初めにPHPとは何かを簡単に説明します。 PHPは、Webサーバ上で動作・表示し HTMLに埋め込むタイプのスクリプト言語で、動的にWebページを生成するための言語です。 HTMLに埋め込むタイプと書きましたが意味は全部PHPという言語で書いていくだけでなく、HTMLの文章の中に組み合わせて書いたりもするということです。 次に動的ページと書きましたが、これはページが左右や上下に動くという意味ではありません、常に同じものを表示するのが静的ページといわれ、もしこの場合はこのぺージ、この場合はこのページなど、臨機応変にページを表示させることができるのが動的ページといわれています。 少し難しいと思われた方がいるとおもいますが、簡単に言うとお問い合わせフォームを作るにはPHPという言語を使用しなければならないということです。 このブログの内容を試されようと思われている方はPHPはWebサーバ上で動くものなのでサーバーをお持ちでないかたは、レンタルサーバーを借りなければなりません。 上達するまでサーバーは借りたくないという方は、XAMPPというローカルでサーバー環境を構築できるものもありますので、「XAMPP使い方」や「XAMPPとは」で検索してみてください。 これはサーバーに毎回アップロードしなくていいのでとても便利です。 アップロードとはローカル(皆さんのパソコン)からサーバー(インターネット上)にデータを送る作業のことです。 1.文字を出力させてみる。 本題に入る前にPHPの最低限のルールを書いておきます。 ①先ほども書きましたがPHPはサーバー上でしか動きませんので注意してください。 ②PHPは拡張子が.phpのファイルに書く。 ③PHP言語(変数や関数など)は必ず<? 上記を必ず守りましょう。 では本題です。 関数とはあらかじめ仕事の内容を記憶させたものと思ってください。 か ですね。 例

Free Icon Fonts for Web User Interfaces By Jacob Gube This roundup features 18 free icon fonts that can be used in your commercial projects. The icon fonts in this post are perfect for your app user interfaces (UIs). What are Icon Fonts? Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters. Icon fonts are like dingbat fonts, but are designed specifically for UIs. And because they’re treated like web fonts, icon fonts: Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)Can be scaled on-the-fly if the user adjusts their web browser settingsCan be rendered with different colorsCan embody font- and text-related CSS properties (like text-shadow and gradient) See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page. To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage. Free Icon Fonts 1. Number of icons: 137. 2. Number of icons: 121. 3.

Startups, This Is How Design Works – by Wells Riley ほんっとにはじめてのHTML5 [16-1] table(表)を作ろう(まずは基本の table, tr, th, td) 今回から、table(テーブル=表)を作ってみましょう。 <table>はこのように、データをまとめて表示したいときに使います。 こんなふうに表組にしたほうが、テキストで説明するよりグッとわかりやすくて省スペース。 企業やお店、学校では、資料として表組をいろいろ扱いますが、それをウェブサイトで表示するときには、この<table>要素を使います。 まずは基本形を作りましょう まずはこのような、基本形のテーブルを作っていきます。 これは↑プレビュー画像。 サンプルのダウンロードはこちら ★上のサンプル画像クリックでHTMLファイルを開きます。 ★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください table要素の基本構造 tableの基本構造はこうなります。 必ず全体は <table></table>で囲まれ、 横一列(1行)は、<tr></tr>で囲まれる構造です。 trは「table row」の略。 それから、thは「table header」の略。 tableの基本HTMLソースを組んでみましょう とにかくソースを見ましょう。 全体は<table>〜</table>で、1行ずつは<tr>〜</tr>で囲まれてます。 1行目で、<table>に class名「sample1」を指定してます。 ★idとclassの違いについては…「CSSレイアウトメモ : 本文2段組[0]基本のキ : IDとCLASSの違い」をご覧ください。 HTMLだけだと見た目はさっぱり… 上記のHTMLソースのままだと、ブラウザのデフォルトのスタイルで表示されますので このように表示されます↓ セルの枠線や塗りがなくて、何が何だかさっぱりわかりませんね。 HTML文書的にはこれでOK。 ビジュアルで情報を得ている者にはとてもわかりにくいので、CSSで見やすくします。 これは↑プレビュー画像。 tableのCSSの基本_シンプルに見た目を整えましょう サンプルのCSSソースを見てみましょう。 まず青バックの部分を見てください。 こんなふうに table要素に上と左、セル要素(th td)に下と右にborderの指定をするのは、 table要素と各セルすべてに上下左右にborder指定をすると、重複して二重線になっちゃうから。 次は 6行目を見てください。

The Making of Octicons Speed up your Front End Development - Part 1 - by Roy Barber by Roy Barber, 3rd February 2013 I gave a talk recently at a local meet up and showed a bunch of front end developers and designers how to save a boat load of time when coding up those beautiful photoshop designs. I will be splitting this topic into a series of three posts, where i’ll be showing you ways to save masses of your precious time, hopefully allowing you to squeeze extra profit out of your projects. Ok so that lovely design is finished and now it’s time to start slicing up that PSD, extracting all the elements you need for your css, like icons, background images and logos. What if all of the above was done for you, like the saving of all the images, the generation of the sprite and the output of the css? Well with the combination of a couple of tools, it can all be automated, let me show you how. We need to start by making a couple of tweaks to your PSD, simple tweaks! Ok now for the even cooler stuff! Now you simply add the class into the html to use the background image.

Related: