Beranda » html » jquery » php » web » Menggunakan icon pada font awesome unutk jquery easy ui

Menggunakan icon pada font awesome unutk jquery easy ui

Bagi anda pengembang website tentu tidak asing lagi dangan css font awesome dan juga jquery easy ui.

Font Awesome

font awesome adalah sebuah css freamwork yang banyak menyediakan font-font cantik yang sangan mudah dalam penggunaan nya dan sangat ringan penggunaan nya karena berbentuk font bukan image jadi sangat ringan dalam load di halaman website anda. untuk keterangan lebih jelas nya silakan merujuk ke website nya langsung http://fortawesome.github.io/Font-Awesome/

Jquery easy ui

Jquery ui adalah salah satu freamwork untuk mempermudah kita mebuat sebuah halamat web dengan tampilan menarik. bukan cuma halaman di sana juga menyediakan banyak fasilitas-fasilitas menarik di antaranya grid, tabs, panel, window, tree, dll dan cara penggunaan nya juga sangat mudah sekali.

ok langsung saja kita ke tkp cara menggabungkan font awesome dan jquery easy ui adalah dengan mengubah sedikit css pada jquery easyui atau anda bisa membuat css baru yang di letakan setelah css jquery easy ui

ok kita coba cara yang kedua saja

buat sebuah halaman web

sebagai contoh


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Accordion - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easyui.css">
    <link rel="stylesheet" type="text/css" href="font-awesome.css"> 

    <link rel="stylesheet" type="text/css" href="icon.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
<script text="text/css">
.panel-icon{
 display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #f8f8f8;
  } 
</script> 
</head>
<body>
    <h2>Basic Accordion</h2>
    <p>Click on panel header to show its content.</p>
    <div style="margin:20px 0 10px 0;"></div>
    <div class="easyui-accordion" style="width:500px;height:300px;">
        <div title="About" data-options="iconCls:'fa-cog fa-lg'" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
            <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>         
        </div>
        <div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
            <ul class="easyui-tree">
                <li>
                    <span>Foods</span>
                    <ul>
                        <li>
                            <span>Fruits</span>
                            <ul>
                                <li>apple</li>
                                <li>orange</li>
                            </ul>
                        </li>
                        <li>
                            <span>Vegetables</span>
                            <ul>
                                <li>tomato</li>
                                <li>carrot</li>
                                <li>cabbage</li>
                                <li>potato</li>
                                <li>lettuce</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

kita tambahkan sesuatu pada css panel-icon

.panel-icon{
 display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #f8f8f8;
  }

perhatikan tulisan yang berwarna merah

pada blok warna merah pertama adalah link unutk css dan jquery nya

blok kedua adalah blok penambahan css untuk panel-icon

sedangkan warna merah yang ketiga adalah penggunaan font awesome untuk class accordian sekarang coba lihat tampilah icon accordian anda apakah ada yang berubah...
selamat mencoba