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. python datetime和unix时间戳之间相互转换

                                python datetime和unix时间戳之间相互转换 1.代码:    import time    import datetime # ...

  2. CSS Notes

    Margin vs. PaddingMargin is on the outside of block elements while padding is on the inside. Use mar ...

  3. JFinal的使用

    JFinal 中的Controller Controller是JFinal核心类之一,该类作为MVC模式中的控制器.基于JFinal的Web应用的控制器需要继承该类.Controller是定义Acti ...

  4. FPGA中的时序分析(一)

    谈及此部分,多多少少有一定的难度,笔者写下这篇文章,差不多是在学习FPGA一年之后的成果,尽管当时也是看过类似的文章,但是都没有引起笔者注意,笔者现在再对此知识进行梳理,也发现了有很多不少的收获.笔者 ...

  5. (笔记)linux 进程和线程的区别

    进程:进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程:线程是进程的一个执行流,是CPU ...

  6. e870. 获取默认外观的数据

    This example demonstrates how to retrieve all the default values for the current look and feel. // G ...

  7. UITableView:改变 TableHeaderView 的高度

    参考:http://stackoverflow.com/a/526825 有这么一种需求,在列表顶端显示一些别样的数据,而这个别样的数据则需要通过一个别样的 View 来展现,它便是 UITableV ...

  8. spark1.4配置安装

    https://segmentfault.com/a/1190000004508993

  9. Thinkphp5 runtime路径设置data

    路径设置 index.php // runtime文件路径define('RUNTIME_PATH', __DIR__ . '/data/runtime/');

  10. Capability Model

    Data Scientist, Analytics We’re looking for data scientists to work on our core and business product ...