ReactNative FontAwesomeを使う

react-native-vector-iconsのインストール 2つのコマンドを叩くだけです。 // –saveはオプションです $ npm install react-native-vector-icons –s…

続きを読む

react-native-vector-icons Tabbarにアイコンを当てる

以下のように、公式の通りにアイコンを当てようとするとアイコンのURLが必要になります。 var SampleTab = React.createClass({ getInitialState: function(){ r…

続きを読む

Font Awesomeでサイトに載っているアイコンが出てこない時はファイルを更新する

Font Awesomeをパソコンにインストールして、Cheatsheetに載っているアイコンをコピーして利用しようとしたときに、化けて出てこない場合があります。 それは単純にファイルが古くなっている場合です。 以下の手…

続きを読む

IE11で、フレームを使ったページでFontAwesomeが表示されない時の対策

IE11に限り、フレームを使っているサイトで片側のフレームだけでFontAwesomeが表示されないことがあった。 どちらかのフレームが必ずなるわけではなく、左がなったり右がなったりする。 ググるとキャッシュの話などが出…

続きを読む

IE11でFontAwesomeが表示されない原因

http://qiita.com/xxIN0xx/items/f6c5fdbf7696ad34a4a9 ここが最も詳しい。 サーバ側で明示的にキャッシュを取っていない場合、IE11はダメなようだ。 症状としても OS、ブ…

続きを読む

Font-Awesomeで45度傾けたアイコンを用意する方法

https://fortawesome.github.io/Font-Awesome/examples/ では90度刻みの設定がされていますが、45度については以下の様なクラスを用意します。 .fa-rotate-45 …

続きを読む

Font Awesomeのアイコンをphotoshopで利用する方法

Font-Awesomeを組み込んだWebサイトをデザインする際に、Photoshop上でもFont-Awesomeを利用できたら便利ですよね。 psdファイルやベクターデータがないかなーと思っていたのですが、検索したと…

続きを読む

Font Awesomeのアイコンの上に一文字重ねる

若干無理やりかも知れませんが、とりあえず以下の記述で表示できます。 記述方法はv3.2.1のものです。 丸背景 <span class=”icon-stack”> <i class=”icon-circ…

続きを読む

Font Awesomeを利用したリンクのアイコン上でカーソルがポインターにならない

Font Awesomeのアイコンをリンク内で利用したときに、アイコン上のみカーソルがポインターにならない現象があります。 これはFont Awesomeのデフォルトのcssで下記の指定が効いているからなため、追加css…

続きを読む

Font Awesomeをリンクに利用したときのカーソルをpointerにする

Font Awesomeをリンクに利用したところ、アイコン上だけカーソルがデフォルトの矢印のままになってしまいました。 そこでcssでpointerにしようとしたのですが、なぜか効きません。 a i.icon-rss{ …

続きを読む

font-awesomeのアイコンの幅を揃える「class=”fa-fw”」

font-awesome3系でのみ使用できます。 <p><i class=”fa fa-time fa-fw”></i>スケジュール</p> <p><i …

続きを読む

Font Awesomeのアイコンで回り込み

左 <i class=”icon-check pull-left”></i> 左にテキストが回り込みます。左にテキストが回り込みます。左にテキストが回り込みます。左にテキストが回り込みます。左にテ…

続きを読む

Font Awesomeでアイコンを合体させる

<span class=”icon-stack”> //外枠 <i class=”icon-check-empty icon-stack-base”></i> //ベースとなるアイコン…

続きを読む

Font Awesomeのアイコンをリストで綺麗に見せる

<ul class=”icons-ul”> <li><i class=”icon-li icon-ok”></i>リスト1</li> <li>&lt…

続きを読む

ソーシャルブックマークボタンをテキストリンク+CSSで表示する

用意されているボタンだと、どうしても表現に限界があります。font-awesome+bootstrapを組み込んでいるサイトであればリンクにbtnクラスで簡単なボタンリンクが作成できるため、これを利用してオリジナルのソー…

続きを読む