1)XIcon 太多坑,不好用,无奈之下,搞了一下 font-awesome

2)下载 font-awesome 源码,并放置到 根目录/src 目录下 ,传送门:http://fontawesome.dashgame.com/

3)在 main.js 里声明引入 font-awesome

import 'font-awesome/css/font-awesome.min.css'

4)使用

<i class="fa fa-commenting-o"></i>

注:fa 是固定需要的 class,后面的图标名到网站上查找并复制就好,传送门:http://fontawesome.dashgame.com/

5)修改图标样式

font-awesome 的图标属于字符图标,想当于文字,可以直接使用 css 来控制,例如:

.fa-commenting-o{color: #4a4a4a; font-size: 18px;}

vux 使用 font-awesome的更多相关文章

  1. 把vux中的@font-face为base64格式的字体信息解码成可用的字体文件

    在最近移动端项目中用到了vux,感觉用着还习惯,当把vux使用到PC端的时候出现了IE浏览器出现,这样的错误信息: CSS3114: @font-face 未能完成 OpenType 嵌入权限检查.权 ...

  2. CSS3与页面布局学习总结(五)——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  4. [函数] Firemonkey Windows 重新计算 Font Baseline

    计算字型 Baseline 是一个不常用的函数,但如果想要显示不同大小文字下方对齐,就得用它来计算字型的 Baseline 才行,如果计算不准,显示的文字就会高高低低不整齐. 在 Firemonkey ...

  5. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  6. 关于firefox对font awesome本地环境无法加载问题

    问题描述 昨天尝试使用font awesome加载字体图标,直接在本地引入相关文件,测试发现图标在chrome和IE环境支持,但是在firefox上怎么都显示不出来. 解决方法 通过测试发现通过htt ...

  7. CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

  8. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  9. CSS 中Font Awesome 图标(附码表)

    HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. Font Awesome 传送门:http://fontawesome.das ...

  10. Font Squirrel

    Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...

随机推荐

  1. Fix missing src/main/java folder in Eclipse Maven Project – 2 build path entries are missing

    新建项目没有src/main/java 和 src/main/resources 两个source文件的解决方法: Step 1 : Create a Maven Webapp project. Ri ...

  2. 史上最全 Css Hack汇总

    前言 每次要找个东西都得慢慢去翻自己收集的一些东西,每次都是那么花时间,再加上有时存放时间久远就忘了当时是存在哪了,为了方便查询及阅读,决定把一些Css Hack 收集起来... 1.区别不同浏览器, ...

  3. RIP路由协议及工作原理

    RIP路由协议及工作原理 RIP(Routing information Protocol,路由信息协议)是应用较早.使用较普遍的内部网关协议(Interior Gateway Protocol,IG ...

  4. C艹复合类型(字符串)

    在C艹中有两种字符串形式, 一种是C-风格, 另一种是C艹风格的 初始化: char str[10] = {'a', 'c', 'd', '\0'};char str[20]= “aaa”; stri ...

  5. jQuery回调、递延对象总结

    jQuery回调.递延对象总结(上篇)—— jQuery.Callbacks jQuery回调.递延对象总结(中篇) —— 神奇的then方法 jQuery回调.递延对象总结(下篇) —— 解密jQu ...

  6. Windows环境下ELK(5.X)平台的搭建

    一.Windows环境下ELK平台的搭建(2.*) 1.安装配置Java环境 在Oracle官网获取最新版的Java版本,由于只是运行不是开发,所以也可以只下载JRE.官网:http://www.or ...

  7. Linux环境安装PostgreSQL-10.1[转]

    环境及资源 Linux版本:CentOS release 6.5 PostgresSQL版本:postgresql-10.1 PostgreSQL官网下载地址:https://www.postgres ...

  8. 用shell 实现对MySQL数据库分页

    参考链接 http://mp.weixin.qq.com/s?__biz=MzAxMzE4MDI0NQ==&mid=208299533&idx=1&sn=4cab00793eb ...

  9. linux下命令行打开文件管理器

    nautilus,这个太有用了,应为可以在secureCRT中使用,因为可以添加sudo来调用

  10. LD_PRELOAD & LD_LIBRARY_PATH 动态库路径

    参考:http://www.cnblogs.com/waterlin/archive/2011/07/14/2106056.html 143上的glibc较低,同学又不能进行升级(造成全局影响),所以 ...