当前位置:首页 > 代码·功能杂七杂八 > 正文

直接在 CSS 中引用 FONTAWESOME 图标

fontawesome

前段时间小幻想在站点内引用一下FONTAWESOME 的图标,不过看样子好像是要加载一下官方的CSS才可以,于是只好下载了官方CSS,不过看了下,原来那货就是在CSS中加载了一个字体,再给那些矢量字体(即FONTAWESOME 图标)编码赋予值,那么,我就呵呵呵了…

首先CSS中加载一下字体文件,然后,下面的就可以搞定了(当然,哪天微软默认带着FONTAWESOME 字体那就不需要了)

所以,小幻果断不用 Fontawesome 提供的类,只想在 css 里面引用图标,可以这样子,其余请自行脑补:

.icon:before {
    content: '\f007';
    font-family: FontAwesome;
}

编码就附上和官方CSS想对应的值,下表 (点击下一页)

关于加载FONTAWESOME字体

	@font-face {
	font-family:'FontAwesome';
	src:url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.eot?v=4.1.0);
	src:url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0) format('embedded-opentype'),url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.woff?v=4.1.0) format('woff'),url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.ttf?v=4.1.0) format('truetype'),url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular)format('svg');
	font-weight:normal;
	font-style:normal
}

字体源是小幻的,可以自己通过下载,保存!

废话:最后说一下那个引用图标的那个东东吧   http://ihuan.me/shuo 碎言碎语~~~

分页阅读: 1 2 下一页
标签:
上一篇: 下一篇:

96 条评论

评论加载中...
  1. Simply desire tto say youjr article is as astounding.

    The clarity for your put up is simply nice and i can assume you are a professional in thi subject.
    Fine with your permission allow me to snatch your feed
    to stay updated with forthcoming post. Thanks 1,000,000 and please continue the gratifying work.

    2018年8月20日 02:50 评论
  2. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a commment is added I get several e-mails
    wijth the same comment. Is there any way you can remove people frokm that service?
    Appreciate it!

    2018年8月20日 01:02 评论
  3. Fantastic beat ! I wish to apprentice while you
    amend your web site, how ccan i subscribe for a blog wweb
    site? The account helped me a acceptable
    deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

    2018年8月19日 21:50 评论
  4. This is my first time visit at here and i am really impressed to read all at alone place.

    2018年8月19日 21:33 评论
  5. It’s remarkable to visit this site and reading the views of all colleagues concerning this paragraph, while I am also eager of getting knowledge.

    2018年8月19日 21:12 评论
  6. TULIP HIFU療程屬非侵入性及非手術的緊膚修身治療,獲歐盟CE、韓國KFDA、GMP、ISO9001、ISO13485等認證,安全可靠。 Tulip的DUAL HIFU精細技術,對面部和眼部治療特別有效;另外,TULIP FB有的13mm及7mm STAMP蓋印式治HIFU治療頭設計,眼、面以外部位,同時具「造身」效果。TULIP【DUAL HIFU高能量聚焦超聲波平台】【特點】- 非手術、非侵入性緊膚治療- 適用於任何膚色肌膚- 治療更精確、更安全- 備有7mm及13mm治療頭,可收緊腹部、臀部、手臂等鬆弛肌膚 【治療目的】- 緊緻肌膚- 提升輪廓- 減淡皺紋- 重塑輪廓線條- 嫩膚亮肌- 提升下垂眼部- 重塑身體線條 (用於7mm/13mm修身治療頭)- 重點減少脂肪細胞 (用於7mm/13mm修身治療頭)

    2018年8月19日 19:34 评论
  7. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a bit, but instead of that, this is magnificent blog. A fantastic read. I will certainly be back.

    2018年8月19日 14:07 评论
  8. When I initially commented I seem to have
    clicked the -Notify me when neew commenys are added- checkbox and now every time a comment iis added I recieve four emails with the
    same comment. Is there an easy method you are able
    to remove me from that service? Thaank you!

    2018年8月18日 23:13 评论
  9. I every time spent my half an hour to read this website’s articles everyday along with a cup of
    coffee.

    2018年8月18日 12:01 评论
  10. Hi there just wanted to give you a quick heads up.
    The text in your content seem tto bbe running offf thee
    screen in Opera. I’m nott sure if this is a format issue or something to
    do with browser compatibility but I thought I’d
    pos to let you know. The style and design look great though!
    Hope you get the issue fixed soon. Cheers

    2018年8月17日 13:12 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……