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

直接在 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. 60楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    jordan 13  

    I found your blog web site on google and examine a couple of of your early posts. Proceed to maintain up the very good operate. I simply additional up your RSS feed to my MSN News Reader. In search of ahead to studying more from you in a while!?

    2018年8月2日 10:16 评论
  2. 59楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    jordan 12  

    This web page can be a walk-via for all of the information you wanted about this and didn抰 know who to ask. Glimpse here, and also you抣l undoubtedly discover it.

    2018年8月2日 05:48 评论
  3. I added a new list. As you’ll see it’s bigger than most of them. I hope you all have had a great week!

    2018年7月31日 05:13 评论
  4. 57楼
    这家伙可能用了美佬的代理 谷歌浏览器 Windows 7
    plain t shirts  

    Actually no matter if someone doesn’t be aware of after that its up
    to other users that they will assist, so here it occurs.

    2018年7月28日 10:42 评论
  5. 56楼
    Canada 谷歌浏览器 Windows 10
    Patrick Maria  

    After reading your blog post I browsed your website a bit and noticed you aren’t ranking nearly as well in Google as you could be. I possess a handful of blogs myself and I think you should use speed rank seo, just search it on google. You’ll find it’s a very nice service that can bring you a lot more visitors. Keep up the quality posts!

    2018年7月25日 08:31 评论
  6. Oeuf d’une heure, pain d’un jour, vin d’un an,

    2018年7月21日 00:26 评论
  7. I like it! Interesting article over this website. It’s pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the web will be much more useful than ever before.| I could not resist commenting. I ‘ve spent some time looking for such article. I’ll also share it with a couple of friends interested in it. I have just bookmarked this website. Finished with the work done, I’ll find some model Cams about WAGs. Thank you!!

    2018年7月20日 18:05 评论
  8. 53楼
    Romania 谷歌浏览器 Windows 10
    Argelia Kosters  

    I was suggested this website by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You’re wonderful! Thanks! xrumer

    2018年7月20日 17:06 评论
  9. 52楼
    Netherlands 谷歌浏览器 Windows 10
    Camara Hong  

    Muy bien el artículo. Lo voy a enviar a a unos amigos. Ahora con el trabajo hecho, me voy a mirar uns camaras webs online, a ver si veo aguna novia.

    2018年7月19日 23:47 评论
  10. 51楼
    这家伙可能用了美佬的代理 谷歌浏览器 Windows 10
    Camara Lecia  

    Muy bien el artículo. Lo voy a enviar a un amigo. Ahora con el trabajo hecho, me voy a disfrutar uns camaras online, a ver si veo aguna novia.

    2018年7月19日 21:50 评论

发表评论

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

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