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

直接在 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. 70楼
    Seychelles 谷歌浏览器 Windows 7
    fertilization  

    I just couldn’t depart your site before suggesting that I really enjoyed the usual information an individual supply
    on your visitors? Is gonna be back continuously to investigate cross-check new posts

    2018年8月8日 14:23 评论
  2. Thanks for several other wonderful write-up. The place different may perhaps everyone get that form of information in this particular best approach regarding crafting? I’ve got a speech next week, and i’m on the look for similarly info koleksi youtube terfavorit.

    2018年8月7日 07:11 评论
  3. Loving the information on this web site , you have done great job on the posts .

    2018年8月5日 21:29 评论
  4. 67楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    jordan 13  

    Howdy! I simply would like to give an enormous thumbs up for the good information you will have right here on this post. I can be coming again to your blog for extra soon.

    2018年8月5日 20:53 评论
  5. Useful information and facts.. koleksi youtube terbaru Lucky me I uncovered your blog by accident, for stunned the reason why this specific accident could not transpired previous! I actually added the item.

    2018年8月3日 22:52 评论
  6. 65楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    cheap jordans  

    I would like to show some thanks to this writer for bailing me out of such a difficulty. Just after exploring through the world-wide-web and finding tips which are not pleasant, I assumed my life was well over. Existing minus the solutions to the issues you have solved through this post is a critical case, as well as ones that could have in a wrong way affected my entire career if I had not noticed your site. Your primary skills and kindness in maneuvering every item was helpful. I don’t know what I would’ve done if I hadn’t come across such a solution like this. I can at this point look forward to my future. Thanks for your time very much for your specialized and sensible guide. I will not be reluctant to refer the website to any person who needs direction on this area.

    2018年8月3日 18:19 评论
  7. I’m not sre why but this website iss loading incredibly slow for me.
    Is anyone else having this issue or is it a problem on my end?

    I’ll check back later and see if the problem still exists.

    2018年8月3日 05:11 评论
  8. Your post on ????????? CSS ????????? FONTAWESOME ?????? – ???????????? is awesome. I hope you can continue delivering many more blog in the future. Viva ihuan.me

    2018年8月3日 01:03 评论
  9. 62楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    jordan shoes  

    very good put up, i definitely love this website, carry on it

    2018年8月2日 20:10 评论
  10. 61楼
    这家伙可能用了美佬的代理 谷歌浏览器 Windows 7
    choose t shirts  

    Hello would you mind stating which blog platform you’re using?
    I’m going to start my own blog soon but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most blogs
    and I’m looking for something completely unique.
    P.S Sorry for being off-topic but I had to ask!

    2018年8月2日 10:50 评论

发表评论

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

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