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. 微信小程序——video使用总结

    关于小程序video的一些基本使用方法,可点击这里稍作了解. 需求: 1.默认显示封面: 2.一个视频播放的时候,其他视频停止播放,并显示封面. 解决问题思路: 1.通过wx:if判断当前视频是否是播 ...

  2. android studio 解析Excel数据格式导入poi-3.17.jar时的一系列报错及处理Failed resolution of: Ljavax/xml/stream/XMLEventFactory,duplicate entry: org/apache/xmlbeans/xml/stream/Location.class,GC overhead limit exceeded

    在org官网下载的poi jar包,导入到studio compile files('libs/poi-3.17.jar') compile files('libs/poi-ooxml-3.17.ja ...

  3. Matlab 读取excel文件提示服务器出现意外情况或无法读取问题解决

    1.问题描述: 该错误通常发生在应用函数读取excel文件(后缀xls或xlsx)时. 应用xlsread函数读取提示服务器出现意外情况: 应用importdata读取时提示can‘t open fi ...

  4. C++ STL Maps

    Maps定义 --> 个人理解为python的字典 C++ Maps are sorted associative containers the contian unique key/value ...

  5. e617. Determining the Opposite Component of a Focus Event

    The opposite component is the other component affected in a focus event. Specifically, in a focus-lo ...

  6. 正则表达式-----------------------------------C#的正则表达式

    为了避免以后这样的情况,在此记录下正则表达式的一些基本使用方法附带小的实例.让以后在使用时能一目了然知道他的使用,为开发节约时间,同时也分享给大家 正则元字符 在说正则表达式之前我们先来看看通配符,我 ...

  7. MyMathLib系列(行列式计算)

    靠人不如靠己,准备做自己得MathLib,在学校的时候,就想过把数学数理的东西都计算机化.但一直没有时间去做这件事情,如今认为空余 时间比較闲,就做做这件事情,先从线性代数開始,毕竟这里面的非常多算法 ...

  8. C# 让枚举返回字符串

    下面的手段是使用给枚举项打标签的方式,来返回字符串 分别定义一个属性类,一个枚举帮助类 /// <summary> /// 自定义属性 /// </summary> [Attr ...

  9. perl 查看某个模块的安装路径

    perldoc 命令可以查看某个模块的安装路径 命令: perldoc -l Bio::Seq 返回值如下: /usr/local/share/perl5/Bio/Seq.pm

  10. LAMP一体环境快速安装

    (一)安装Apache 1.下载安装 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 yum install zlib-devel -y wget http://m ...