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. webpack7--css压缩成单独的css文件

    先看下下面的图片: 我们可以看到,通过Webpack打包后,默认CSS是通过 内部样式表 写入的.我们如何把压缩后的CSS单独导出为CSS 呢? 1.安装 extract-text-webpack-p ...

  2. node学习笔记6——自定义模块

    自定义模块三大关键词: require——引入模块: exports——单个输出: module——批量输出. 从例子下手: 1.创建module.js: exports.a=22; exports. ...

  3. Casual Note of Computer Network

    20170605 本地环回地址(loopback): IPV4:127.0.0.1-127.255.255.254 IPV6:::1 (即 0000:0000:0000:0000:0000:0000: ...

  4. Jquery ThickBox的使用

    thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法.声明一下:这只是个人的总结记载而已.准备工作:你需要三个文件:thickbox ...

  5. 深入浅出 kvm qemu libvirt

    在所谓的kvm技术中,应用到的其实有2个东西:qemu+kvmkvm负责cpu虚拟化+内存虚拟化,实现了cpu和内存的虚拟化,但kvm不能模拟其他设备:qemu是模拟IO设备(网卡,磁盘),kvm加上 ...

  6. 【CUDA学习】内核程序调试

    调试工具 cuda-gdb,网上有英文版的说明文档. 其中大部分调试命令和gdb的调试命令相同. cuda程序分为主机端程序和设备端程序,主机端程序调试也就是C语言程序的调试 主要是设备端程序,关键点 ...

  7. 动态SQL是什么??什么是静态SQL,动态SQL的动态体现在哪里???

    首先,所谓SQL的动态和静态,是指SQL语句在何时被编译和执行,二者都是用在SQL嵌入式编程中的,这里所说的嵌入式是指将SQL语句嵌入在高级语言中,而不是针对于单片机的那种嵌入式编程.在某种高级语言中 ...

  8. Solr系列六:solr搜索详解优化查询结果(分面搜索、搜索结果高亮、查询建议、折叠展开结果、结果分组、其他搜索特性介绍)

    一.分面搜索 1. 什么是分面搜索? 分面搜索:在搜索结果的基础上进行按指定维度的统计,以展示搜索结果的另一面信息.类似于SQL语句的group by 分面搜索的示例: http://localhos ...

  9. maven中json-lib库无法引入

    今天在maven中引入json-lib库,intellij中的pom文件没有报错,但是在类中就是无法使用. pom依赖配置: <dependency> <groupId>net ...

  10. 有空研究一下 superwebsocket (底层是 supersocket) 用来实现 web聊天什么的

    参考:http://superwebsocket.codeplex.com/ 一个老外写的 asp.net 下socket的多钟方案推荐 :http://www.codeproject.com/Art ...