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处理


  • 相关阅读:
    洛谷 P1226 【模板】快速幂||取余运算 题解
    洛谷 P2678 跳石头 题解
    洛谷 P2615 神奇的幻方 题解
    洛谷 P1083 借教室 题解
    洛谷 P1076 寻宝 题解
    洛谷 UVA10298 Power Strings 题解
    洛谷 P3375 【模板】KMP字符串匹配 题解
    Kafka Shell基本命令
    Mybatis与Hibernate的详细对比
    MyBatis简介
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6801441.html
Copyright © 2011-2022 走看看