当前位置:楚狂人博客 > 网站源码 > 正文

作者:楚狂人

我本楚狂人,凤歌笑孔丘。

网站建设中常用的个性化图标服务Font Awesome

我们在网站建设或者网页设计的时候经常需要用到一些图标,以前的时候大家都是直接上传图片。但是现在越来越多的朋友自己建站或者帮助企业建站的时候都开始使用Font Awesome,只要一段简单的代码就可以直接调用多达675个图标,既简洁又美观。而且Font Awesome完全开源免费,不需要java支持,直接CSS代码控制,具有良好的兼容性和扩展性。

网站建设中常用的个性化图标服务Font Awesome

Font Awesome

Font Awesome是一款提供可缩放矢量图标,自定义大小、颜色、阴影以及任何可以用CSS的样式的象形文字语言,其最初是为Bootstrap而设计的,现在Font Awesome适用于所有框架。Font Awesome完美支持Retina Display(视网膜显示)屏幕,可以在电脑、手机、平板等设备上完美呈现。可以看下在楚狂人博客导航栏的应用:

网站建设中常用的个性化图标服务Font Awesome

fontawesome

通过设置CSS前缀fa和图标的具体名称,来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素,使用简短的<i>标签,可以使它的语义更加精准。比如说你想要使用HOME图标,你可以直接使用代码:

<i class="fa fa-home" aria-hidden="true"></i>Home

如果启用了Font Awesome 4 Menus插件,也可以在后台外观/菜单面板中对应的项目CSS选项下直接填写短代码 fa fa-home 。

Font Awesome图标查询网址

http://www.fontawesome.com.cn/faicons/

如果你想要使用一些效果,或者你想要调整显示图标的大小,可以使用如下代码:

设置图标相对于容器大小:fa-lg ,fa-2x ,fa-3x ,fa-4x ,fa-5x。。。。

设置图标在一个固定宽度内:fa-fw

设置列表类图标:fa-ul 和 fa-li

构造出引用的特殊效果:fa-border 和 fa-pull-right 或 fa-pull-left

设置图标旋转效果:fa-spin,fa-pulse

设置图标进行任意旋转和翻转:fa-rotate-* 和 fa-flip-*

将多个图标组合:使用fa-stack类作为父容器,fa-stack-1x作为正常比例的图标,fa-stack-2x作为大一些的图标。

最新的4.7.0版,收录了675个图标…如果你觉得本页图标太小,可以看这里:

http://www.fontawesome.com.cn/icons-ui

如果你是名设计师,并且需要在Photoshop或Illustrator等其他桌面应用中使用,请访问 Font Awesome 矢量版:

http://www.fontawesome.com.cn/cheatsheet/

未经允许不得转载:

作者:楚狂人, 转载或复制请以 超链接形式 并注明出处 楚狂人博客
原文地址:《网站建设中常用的个性化图标服务Font Awesome》 发布于2018-12-24

分享到:
赞(4) 打赏

评论 6

7 + 2 =
  1. #4

    这个很多主题都在用。

    黑桃三8个月前 (12-26)回复
    • 对的,大家都可以自己设置

      楚狂人8个月前 (12-27)回复
  2. #3

    这个美化网站超到关键作用。

    张波博客8个月前 (12-26)回复
    • 嗯,还挺好用的

      楚狂人8个月前 (12-26)回复
  3. #2

    这个厉害了 很实用

    搜题网8个月前 (12-25)回复
  4. #1

    评论框测试

    楚狂人8个月前 (12-24)回复
网站建设中常用的个性化图标服务Font Awesome

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阿里云8月爆款活动

云服务器全场2折起,活动期间,用户通过本活动页面购买指定云产品,可享受相应的优惠折扣同一用户限购1单。

了解一下

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册