文本框：帶圖標文字提示
案例來源：淘寶首頁-搜索框
- 輸入文字前：（圖1-1）
- 輸入文字后：（圖1-2）
元件準備：
- 頁面中（圖1-3）
案例描述：
在搜索框里面，文本框中的文字提示包含圖標。
思路分析：
文本框可以添加文字提示，而圖標字體中的圖標也是文字。那么案例中的搜索圖標，我們就可以使用圖標字體來實現(xiàn)。
操作步驟：
1、雙擊安裝FontAwesome字體文件，載入FontAwesome4.4.0圖標字體元件庫；
2、切換到FontAwesome4.4.0圖標字體元件庫；
3、從元件庫中找到圖標，拖放到畫布；
4、雙擊圖標，復制里面的圖標文字；
5、將復制的內(nèi)容粘貼到文本框?qū)傩缘膡提示文字}中，并輸入其它文字；（圖1-4）
6、點擊【提示樣式】，在樣式設置界面中設置提示文字字體為“FontAwesome”，字體顏色為灰色。（圖1-5）
7、參考“基礎56”，在web字體設置中添加FontAwesome字體的設置方案。
補充說明：
- 本案例需要結(jié)合特殊字體元件：FontAwesome4.4.0圖標字體元件庫。該元件庫在本書的配套資料中。
- 使用FontAwesome4.4.0圖標字體元件庫，除了要參考“基礎30”載入元件庫，還要安裝相應的字體文件。安裝字體文件時，請先關閉Axure，安裝完字體文件后，打開Axure方可正常使用。
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。