23-4 fontawesome-iconpicker

一、官網：

1. https://farbelous.github.io/fontawesome-iconpicker/
2. github： https://github.com/farbelous/fontawesome-iconpicker

二、使用方式

1. 下載 至 「UniServerZ/www/ugm_p/class」解壓縮
2. 引入「fontawesome」：因為我們主樣板已經引入，所以省略
3. 引入

   
   	<link rel="stylesheet" type="text/css" href="<{$xoAppUrl}>class/fontawesome-iconpicker/css/fontawesome-iconpicker.min.css">
   	<script type="text/javascript" src="<{$xoAppUrl}>class/fontawesome-iconpicker/js/fontawesome-iconpicker.min.js"></script>
   	<script type='text/javascript'>
   	  $(document).ready(function(){
   	    $('#icon').iconpicker();
   	  });
   	</script>		
   

    

4. 樣板語法

     
             <div class="col-sm-3">
               <div class="form-group">
                 <label for="icon">圖示</label>
                 <div class="input-group iconpicker-container">
                   <input type="text" data-placement="bottomRight" class="form-control icp icp-auto iconpicker-element iconpicker-input" id="icon" name="icon" value="<{$row.icon}>">
                   <span class="input-group-addon"><i class="fa fa-archive"></i></span>
                 </div>
               </div>            
             </div>