zoukankan      html  css  js  c++  java
  • [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用添加字体图标

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411
    本文作者:sushengmiyan
    -------------------------------------------------资源链接--------------------------------------------------------
    FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/

    使用图标美化button: http://blog.csdn.net/jfok/article/details/35994081

    use font awesome Icons in Ext js : http://extjs.eu/using-font-icons-in-ext-fontawesome/

    --------------------------------------------------------------------------------------------------------------------


    前期准备:

    -------------

    1.了解sencha cmd

    2.了解Ext JS 5

    即能够完毕 http://blog.csdn.net/sushengmiyan/article/details/38313537 内容就可以顺利进入本节学习。


    第二节结束后,我们能够使用sencha cmd构建一个项目,一般来说。站点对于美工要求是比較多的,看起来舒适的网店大家都愿意上。

    使用sencha cmd 自己主动构造出来的程序,button就是一个普通的button。面板也是普通的面板,假设我想对button添加一个图标,是不是会更好看呢?本节介绍一种简单的给ext js程序添加fontawesome提供的图标的方法。


    Font Awesome简单介绍

    --------------------------

    Font Awesome是一款非常流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识,如今FontAwesome不只能够在bt上使用。还能够应用在各种web前端开发中。相对于传统的使用背景图片作为图标,字体图标主要是支持自适应、能够使用字体的各种特性(比方变色、变大变小、字体阴影等)、降低数据载入、样式更easy定义等。

    官网:http://fortawesome.github.io/Font-Awesome/

    最新版本号:4.1


    在Ext js中使用 Font Awesome

    ----------------------------------------

    在Ext中使用Font Awesome 非常easy。首先我们须要下载Font Awesome压缩包

      1.下载Font Awesome压缩包。

           下载地址:http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip

           点击下载。或者进入官网下载最新版本号就可以。

      2.解压缩文件到应用程序文件夹。

         下载之后,我们能够看到font-awesome-4.1.0.zip这种zip压缩包,解压缩。能够看到有例如以下文件夹:


    我们只须要当中的css文件夹和fonts文件夹就可以。

    解压到应用程序文件夹,即有.sencha文件夹的这个文件夹,我解压之后例如以下:


    3.将css文件引入我们的项目

    打开项目中的index.html文件。添加例如以下代码:

    <link type="text/css" rel=" stylesheet" href="css/font-awesome.css"">

    4.给button等添加图标

    好。准备工作完毕,如今就将好看的图标添加进程序,先跟我一起改动appviewmain文件夹下的Main.js文件

    用editPlus打开。大约是在32行和33行。

    我们将button的值改成了保存。然后添加了一个glyph属性。这种话执行效果例如以下:

    5.疑惑解释

    对于button和面板等来说,都存在glyph这个属性,我们能够通过这个属性给button等加好看的图标。

    后面跟着的是一串字符码,这个字符码我们怎样获取呢?

    glyph码获取: http://fortawesome.github.io/Font-Awesome/cheatsheet/

    对于每个版本号都有对于的cheatsheet页面,我们到这里面找我们喜欢的图标。然后比对后面的字码就可以。 

    Every Font Awesome 4.1.0 Icon, CSS Class, & Unicode :http://fortawesome.github.io/Font-Awesome/cheatsheet/

    还有一种简化实现

    假设说,每次都键入'xf0c7@FontAwesome'后缀@FontAwesome比較繁琐,那么你能够在程序载入的时候指定字体格式。

    如在Mian.js中的initComponent函数值中添加Ext.setGlyphFontFamily('FontAwesome');那么后期使用的时候就能够不加后缀啦。

    可是须要注意的是,这样操作之后,就不能够使字符串形式了,须要是数字形式了。如:


    设置全局字体文件


    简化之后的glyph处理


  • 相关阅读:
    CF676E:The Last Fight Between Human and AI
    BZOJ2079: [Poi2010]Guilds
    BZOJ4518: [Sdoi2016]征途
    BZOJ2216: [Poi2011]Lightning Conductor
    51nod1766 树上的最远点对
    洛谷P1257 平面上的最接近点对
    BZOJ2144: 跳跳棋
    BZOJ4773: 负环
    BZOJ4552: [Tjoi2016&Heoi2016]排序
    The Falling Leaves(建树方法)
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6801441.html
Copyright © 2011-2022 走看看