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

直接在 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. Thiis is a really good tip especially tto those neew to the
    blogosphere. Simple but very precise information… Appreciate your sharing this one.
    A must read post!

    2018年7月19日 09:05 评论
  2. 39楼
    Canada 谷歌浏览器 Windows 7
    55 printing  

    Admiring the hard work you put into your site and in depth information you present.
    It’s nice to come across a blog every once in a while that isn’t the same old rehashed information. Fantastic read!
    I’ve bookmarkwd your site and I’m including your RSS feeds
    to my Google account.

    2018年7月19日 08:18 评论
  3. Someone essentially assist to mke seriously articles I might state.
    This is the forst time I frequented your website page and up tto now?
    I surprised with the analysis yoou made to create this particular publish amazing.
    Great activity!

    2018年7月19日 08:06 评论
  4. 37楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    chouqin  

    I discovered your weblog web site on google and examine a few of your early posts. Proceed to keep up the very good operate. I simply further up your RSS feed to my MSN Information Reader. In search of ahead to studying more from you later on!?

    2018年7月18日 19:27 评论
  5. 36楼
    Canada 谷歌浏览器 Windows 7
    nudity  

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and
    now each time a comment is added I get several e-mails wiith the
    same comment. Is there anyy way you can remove people from that service?
    Cheers!

    2018年7月16日 19:52 评论
  6. Thanks for a marvelous posting! I actually enjoyed reading
    it, you could be a great author. I will make sure to bookmark
    your blog and will often come back later in life.

    I want to ejcourage continue your great posts,
    hwve a noce holiday weekend!

    2018年7月15日 02:55 评论
  7. 34楼
    Netherlands 谷歌浏览器 Windows 10
    WAGs 2018 Cams  

    Cool one! Interesting info 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 a lot more useful than ever before.| I could not resist commenting. I have spent some time looking for such infos. I’ll also share it with some friends interested in it. I’ve just bookmarked this website. Right now with the work done, I’ll visit some WAGs Webcams. Thanks!! Regards from Russia WM!

    2018年7月14日 05:50 评论
  8. Thank you a lot foor shariing this with all of us you really recognise
    what you’re talking approximately! Bookmarked. Kindly also
    discuss with my site =). We can have a hyperlink chabge agreement among us

    2018年7月14日 01:30 评论
  9. Cool info! Interesting informations over here. It’s pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.| I couldn’t refrain from commenting. I ‘ve spent 1 hour searching for such tips. I will also share it with some friends interested in it. I have just bookmarked this web. Right now with the job done, I going to watch some Russia model Cams. Thanks!! Regards from Russia 2018!

    2018年7月13日 15:49 评论
  10. This post is priceless. Where can I find out more?

    2018年7月13日 03:26 评论

发表评论

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

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