有料のボタンが無料で公開されたと聞いて
Sampleのボタンを移動する時は相対パスも書き換える
Tip with Flattr Follow me on Tumblr Subscribe to my Posterous Check in with Gowalla Check in with foursquare Write a review on Yelp
Follow me on Soundcloud Read on Smashing Magazine Sign in with WordPress Sign in with IntenseDebate Sign in with OpenID Sign in with Gmail
Sign in with Eventbrite Sign in with Eventasaurus Sign in with Meetup.com Follow me on Plancast Subscribe on YouTube Available on the Mac App Store
View Creative Commons Licence Subscribe to RSS Follow me on Weibo Follow me on Plurk Follow me on Grooveshark
とりあえず提供元のサイトはこちらです。
まずSampleをダウンロードしますが、フォルダの中は
- CSS
- Type
- README
- Sample.html
の4つが同梱されています。
CSSのファイルをそのままアップしてリンクさせて反映させたいところですが、うまくいきません。
理由としては、Typeフォルダの中にある4つのファイルを呼び出す時にその4つのファイルが全て相対パスで記されてしまっているため、見本のような綺麗なアイコンではなくて、文字が並んだ(代替えテキスト)ものだけが表示されてしまいます。
変更箇所はこれです。
ピンクの部分が相対パスになっていますので、4つのファイルを個人でアップして
それぞれ適応する部分を絶対パスに書き換えればOKです。
/*Vector Icons*/
@font-face {
font-family: 'zocial';
src: url('..type/zocial-regular-webfont.eot');
src: url('..type/zocial-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../type/zocial-regular-webfont.woff') format('woff'),
url('..type/zocial-regular-webfont.ttf') format('truetype'),
url('..type/zocial-regular-webfont.svg#ZocialRegular') format('svg');
font-weight: normal;
font-style: normal;
}
ちなみに、CSSの適応方法ですが
@import "url";
@import宣言、これは使えません
何故かはてなブログでは呼び出せないようです。
<link rel="stylesheet" href="">
使うならこれになります。
少し邪道ですがサイドバー編集部の所にこれを記入してcssファイルの直リンクを当てます。
実質<body>内に書かれることになりますが、反映させるためにはやむをえません。
これらのボタンを使ってデザインを考えていくのも良いかもしれません。
※P.S.Chrome以外の場合は文字列になるようです
