天丁
天丁

微信小程序中引用FontAwesome字体 最完整教程 附下载源码

目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼
主要步骤,下载>转码>合并样式>引用 样式,不会的可下载源码

1.到Font Awesome官网下载字体包

官网链接:Font Awesome中文官网

2.打开1中下载的压缩包找到.ttf文件

如下图所示:
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第1张图片

3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载

如下图所示:
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第2张图片

下一步
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第3张图片

4.打开3中下载的文件，找到stylesheet.css,

拷贝到小程序,只需要拷贝css样式文件,其他都不需要.
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第4张图片

5.在桌面新建一个fontAwesome.wxss文件

微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第5张图片

6.打开4中的文件，复制里面的代码到5中的新建的fontAwesome.wxss文件中 stylesheet.css代码如下: 图片中已经把图标文件转成64位字符了.

微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第6张图片
复制到fontAwesome.wxss中:
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第7张图片

7.打开1中的文件font-awesome.css,复制里面的css(去掉@font-face部分)到新建的fontAwesome.wxss文件中

（接着6中复制内容的后面）
font-awesome.css如下: 这个步骤比较关键.意思就是除了路径之外的样式文件都拷贝过来.
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第8张图片

打开文件:

微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第9张图片
复制其余部分到fontAwesome.wxss
其实就是把两个css文件拼接起来就好了.
上面来自font-awesome.css
下面来自stylesheet.css 这步很关键,很多人就是错失了这一步,导致失败.
微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第10张图片

8.然后引入小程序中直接用就可以了

小程序需要引用的文件就一个.

微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第11张图片

  
Loading...


Loading...


Loading...


Loading...

效果如下 不错吧,关注 28找群 公众号 更多惊喜.

微信小程序中引用FontAwesome字体 最完整教程 附下载源码_第12张图片

你可能感兴趣的:(asp-net)

  • 我的新书 asp net开发技巧精讲 运真表姐
    分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！搜asp.net开发技巧精讲卓越亚马逊本书链接http://www.amazon.cn/ASP-NET%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2-
  • 未能解决：未能加载文件或程序集“XXXXXXXXX”或它的某一个依赖项。另一个程序正在使用此文件，进程无法访问。 (异常来自 HRESULT:0x8007002 哗哈哈
    现在遇到的问题和这个一样：点击打开链接http://bytes.com/topic/asp-net/answers/629488-says-dll-file-use-cant-loaded-until-restart-iisIcopiedanewsetoffilesovertomyASP.NETdir(andsubdirs)onourtestserver.Thisreplacedeveryfile
  • 常用ASP-NET常识解析预处理 Tony90hou
    1.Asp.Net中几种相似的标记符号:解释及用法答::是在绑定控件DataBind()方法执行时被执行，用于数据绑定如::在程序执行时被调用，可以显示后台变量值如:*.aspx中：*.cs中:protectedstringaaa="姓名";:内联代码块里面可以在页面文件*.aspx或*.ascx文件里面嵌入后台代码如:是在*.aspx页面前台代码导入命名空间,如:2.控件接收哪些类型数据?答:接
  • 基于ASP.NET的足球爱好者约战网站 biyesheji51qqcom C#毕业设计
    基于ASP.NET的足球爱好者约战网站访问链接：http://www.itbiyesheji.com/index.php/2019/07/28/基于asp-net的足球爱好者约战网站/可以获得更好的阅读体验摘要随着中国经济水平的发展，人们娱乐需求日益增长，足球这世界第一运动在中国变得本系统依据开发要求基于B/S的体系结构，采用ASP.NET技术和MVC的思想开发。本系统可使足球爱好者登录网站约战，
  • 当PreviousPage.FindControl遇到MasterPage，如何查找控件 master
    本文转自：http://www.sqlsky.com/asp-net/070721/585/ 有以下两个页面Default.aspx和Result.aspx，代码如下： <!-- Default.aspx --> <%@ Page Language="C#" AutoEventWireup="tru
  • 在Web站点中创建和使用Rss源 Web
    转自:http://www.tracefact.net/Asp-Net/Creating-and-Consuming-Rss-Feeds-on-Your-Website.aspx 主要参考： Creating Rss Feeds For Your Web SiteConsuming Rss Feeds On Your Web Site 术语表 tag：标签markup：标记node：结点it
  • Http Module 介绍<转>http://www.tracefact.net/Asp-Net/Introduction-to-Http-Module.aspx Module
    引言 Http 请求处理流程 和 Http Handler 介绍 这两篇文章里，我们首先了解了Http请求在服务器端的处理流程，随后我们知道Http请求最终会由实现了IHttpHandler接口的类进行处理(应该记得Page类实现了IHttpHandler)。从 Http 请求处理流程 一文的最后的一幅图中可以看到，在Http请求由IHttpHandler处理之前，它需要通过一系列的Http M
  • [转贴]Http Handler 介绍 handler
    原文:http://www.tracefact.net/Asp-Net/Introduction-to-Http-Handler.aspx 引言 在 Part.1 Http请求处理流程 一文中，我们了解了Http请求的处理过程以及其它一些运作原理。我们知道Http管道中有两个可用接口，一个是IHttpHandler，一个是IHttpModule，但在Part.1中，我并没有详细讲述如何对它们进行
  • Http Module 介绍 Module
    from： http://www.tracefact.net/Asp-Net/Introduction-to-Http-Module.aspx 引言 Http 请求处理流程 和 Http Handler 介绍 这两篇文章里，我们首先了解了Http请求在服务器端的处理流程，随后我们知道Http请求最终会由实现了IHttpHandler接口的类进行处理(应该记得Page类实现了IHttpH
  • IIS 7.0相关文章收集 IIS
    How to Run ASP.NET v1.1 on IIS7： http://www.iis.net/articles/view.aspx/IIS7/Hosting-Web-Applications/ASP-NET/How-to-Run-ASP-NET-v1-1-on-IIS7 Creating IIS7 sites, applications, and virtual directories：
  • ASP.NET学习链接 asp.net
    张子阳个人ASP.NET技术博客：http://www.tracefact.net/Asp-Net/ 动态加载asp.net分页控件：http://www.cnblogs.com/cresuccess/archive/2009/02/07/1385741.html Memcached总结：http://www.cnblogs.com/Blogs-Wang/p/4453215.html
  • Say Hello to PowerShell xiaoyao3857
    http://net.tutsplus.com/tutorials/asp-net/say-hello-to-powershell/PowerShell hasbeenindevelopmentforovertenyears.Microsoftcontinuestoinvestinitsdevelopmentandadoption.Theseinvestmentshavetransformedth
  • 引起IIS下Asp.net应用程序重启的原因 kaosini
    转载地址：http://www.leadnt.com/2011/07/asp-net%E5%88%A0%E9%99%A4%E6%96%87%E4%BB%B6%E5%A4%B9%E5%AF%BC%E8%87%B4%E7%8A%B6%E6%80%81%E5%A4%B1%E6%95%88/在ASP.NETWEB应用程序中，如果程序执行删除目录操作，该应用程序会重启，session等会丢失。网上寻找资料，
  • ASP.NET 指令语法大全 zhanghui_hn Microsoftassemblybasicasp.netreference编译器
    本文来自网络，向作者致敬：http://www.butlife.com/asp-net%E6%8C%87%E4%BB%A4%E8%AF%AD%E6%B3%95/ASP.NET页框架支持以下指令。@ Page定义ASP.NET页分析器和编译器使用的特定于页的属性。只能包含在.aspx文件中。@ Control定义ASP.NET页分析器和编译器使用的控件特定属性。只能包含在.ascx文件（用户控件）中
  • 我的新书《asp.net开发技巧精讲》 21aspnet asp.netjavascript2010cssjoinsqlASP.NET精讲
    搜    asp.net开发技巧精讲 卓越亚马逊本书链接http://www.amazon.cn/ASP-NET%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2-%E9%BB%84%E9%B8%A3/dp/B006PHZCZU/ref=sr_1_1?ie=UTF8&qid=1324889808&sr=8-1  当当网本书链接http://
  • 我的新书《asp.net开发技巧精讲》 957803796_1 asp.net
    搜asp.net开发技巧精讲卓越亚马逊本书链接http://www.amazon.cn/ASP-NET%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2-%E9%BB%84%E9%B8%A3/dp/B006PHZCZU/ref=sr_1_1?ie=UTF8&qid=1324889808&sr=8-1当当网本书链接http://product
  • 我的新书《asp.net开发技巧精讲》 qinglongyun asp.net
    搜asp.net开发技巧精讲卓越亚马逊本书链接http://www.amazon.cn/ASP-NET%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2-%E9%BB%84%E9%B8%A3/dp/B006PHZCZU/ref=sr_1_1?ie=UTF8&qid=1324889808&sr=8-1当当网本书链接http://product
  • [置顶] 我的新书《asp.net开发技巧精讲》 21aspnet JavaScriptJOINsqlcssasp.net2010
    搜    asp.net开发技巧精讲 卓越亚马逊本书链接http://www.amazon.cn/ASP-NET%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7%E7%B2%BE%E8%AE%B2-%E9%BB%84%E9%B8%A3/dp/B006PHZCZU/ref=sr_1_1?ie=UTF8&qid=1324889808&sr=8-1  当当网本书链接http://
  • c＃sqlite小问题 congjl2002 sqlite
    <!--StartFragment --> 我用c＃的 sqlite，加载了System.Data.SQLite.dll但是提示我缺少 SQLite.Interop.dll，但是我引用时候，提示 couldn't added http://www.mbrock.com/work/asp-net/124-using-sqlite-with-
  • Http Module 介绍 plean objectsessionModuleapplicationasp.netHttpModule
     http://www.tracefact.net/Asp-Net/Introduction-to-Http-Module.aspx引言Http请求处理流程和HttpHandler介绍这两篇文章里，我们首先了解了Http请求在服务器端的处理流程，随后我们知道Http请求最终会由实现了IHttpHandler接口的类进行处理(应该记得Page类实现了IHttpHandler)。从Http请求处理流程
  • how to prevent multiple login for same user in asp.net lJean sqlsessionservercacheuserasp.netlogin
    http://bytes.com/topic/asp-net/answers/890252-how-prevent-multiple-login-same-user-asp-net Thisanswerwilldependonhowyouimplementthelogincomponentofyourapplication.Mostofthetimetheloginisassociatedwith
  • 有用的东西，mark下 leebonew
    http://www.cnblogs.com/koqizhao/http://www.jzxue.com/wangzhankaifa/asp-net/201101/02-5426.html研究下牛逼的fckeditor……http://www.aspxhome.com/download/flash/20087/441022.htm这个东西也挺好http://www.cnblogs.com/feng
  • 有用的东西，mark下 flyboNew html.netfckeditorasp.netasp
    http://www.cnblogs.com/koqizhao/ http://www.jzxue.com/wangzhankaifa/asp-net/201101/02-5426.html 研究下牛逼的fckeditor…… http://www.aspxhome.com/download/flash/20087/441022.htm 这个东西也挺好 http://www
  • Http Module 介绍 北极的。鱼 .netWebSecurityasp.netasp
    【转自  http://www.tracefact.net/Asp-Net/Introduction-to-Http-Module.aspx】引言Http请求处理流程和HttpHandler介绍这两篇文章里，我们首先了解了Http请求在服务器端的处理流程，随后我们知道Http请求最终会由实现了IHttpHandler接口的类进行处理(应该记得Page类实现了IHttpHandler)。从Http请
  • asp.net利用OWC生成饼状图、柱状图 kendezhu html.netasp.netasp
    http://www.jzxue.com/wangzhankaifa/asp-net/201001/20-3429.html   http://www.cnblogs.com/xumingming/archive/2008/07/02/1234311.html   http://www.cnblogs.com/peterzb/archive/2009/07/21/152
  • IIS 7.0相关文章收集 张善友 职场IIS休闲
    HowtoRunASP.NETv1.1onIIS7：[url]http://www.iis.net/articles/view.aspx/IIS7/Hosting-Web-Applications/ASP-NET/How-to-Run-ASP-NET-v1-1-on-IIS7[/url]CreatingIIS7sites,applications,andvirtualdirectories：[ur
  • Java实现的简单双向Map，支持重复Value superlxw1234 java双向map
    关键字：Java双向Map、DualHashBidiMap     有个需求，需要根据即时修改Map结构中的Value值，比如，将Map中所有value=V1的记录改成value=V2，key保持不变。   数据量比较大，遍历Map性能太差，这就需要根据Value先找到Key，然后去修改。   即：既要根据Key找Value，又要根据Value
  • PL/SQL触发器基础及例子 百合不是茶 oracle数据库触发器PL/SQL编程
      触发器的简介; 触发器的定义就是说某个条件成立的时候，触发器里面所定义的语句就会被自动的执行。因此触发器不需要人为的去调用，也不能调用。触发器和过程函数类似 过程函数必须要调用,   一个表中最多只能有12个触发器类型的,触发器和过程函数相似 触发器不需要调用直接执行, 触发时间：指明触发器何时执行，该值可取： before：表示在数据库动作之前触发
  • [时空与探索]穿越时空的一些问题 comsci 问题
          我们还没有进行过任何数学形式上的证明,仅仅是一个猜想.....       这个猜想就是; 任何有质量的物体(哪怕只有一微克)都不可能穿越时空,该物体强行穿越时空的时候,物体的质量会与时空粒子产生反应,物体会变成暗物质,也就是说,任何物体穿越时空会变成暗物质..(暗物质就我的理
  • easy ui datagrid上移下移一行 商人shang js上移下移easyuidatagrid
    /** * 向上移动一行 * * @param dg * @param row */ function moveupRow(dg, row) { var datagrid = $(dg); var index = datagrid.datagrid("getRowIndex", row); if (isFirstRow(dg, row)) {
  • Java反射 oloz 反射
    本人菜鸟，今天恰好有时间，写写博客，总结复习一下java反射方面的知识，欢迎大家探讨交流学习指教 首先看看java中的Class package demo; public class ClassTest { /*先了解java中的Class*/ public static void main(String[] args) { //任何一个类都
  • springMVC 使用JSR-303 Validation验证 杨白白 springmvc
    JSR-303是一个数据验证的规范，但是spring并没有对其进行实现，Hibernate Validator是实现了这一规范的，通过此这个实现来讲SpringMVC对JSR-303的支持。 JSR-303的校验是基于注解的，首先要把这些注解标记在需要验证的实体类的属性上或是其对应的get方法上。 登录需要验证类 public class Login { @NotEmpty
  • log4j 香水浓 log4j
    log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, HTML, DATABASE #log4j.rootCategory=DEBUG, STDOUT, DAILYFILE, ROLLINGFILE, HTML #console log4j.appender.STDOUT=org.apache.log4j.ConsoleAppender log4
  • 使用ajax和history.pushState无刷新改变页面URL agevs jquery框架Ajaxhtml5chrome
    表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。 是什么有这么强大的功能呢？ HTML5里引用了新的API，history.pushState和history.replaceState，就是通过
  • centos中文乱码 AILIKES centosOSssh
    一、CentOS系统访问 g.cn ，发现中文乱码。 于是用以前的方式：yum -y install fonts-chinese CentOS系统安装后，还是不能显示中文字体。我使用 gedit 编辑源码，其中文注释也为乱码。       后来，终于找到以下方法可以解决，需要两个中文支持的包： fonts-chinese-3.02-12.
  • 触发器 baalwolf 触发器
    触发器(trigger)：监视某种情况，并触发某种操作。 触发器创建语法四要素：1.监视地点(table) 2.监视事件(insert/update/delete) 3.触发时间(after/before) 4.触发事件(insert/update/delete) 语法： create trigger triggerName after/before 
  • JS正则表达式的i m g bijian1013 JavaScript正则表达式
            g:表示全局（global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止。         i:表示不区分大小写（case-insensitive）模式，即在确定匹配项时忽略模式与字符串的大小写。         m:表示
  • HTML5模式和Hashbang模式 bijian1013 JavaScriptAngularJSHashbang模式HTML5模式
            我们可以用$locationProvider来配置$location服务（可以采用注入的方式，就像AngularJS中其他所有东西一样）。这里provider的两个参数很有意思，介绍如下。 html5Mode         一个布尔值，标识$location服务是否运行在HTML5模式下。 ha
  • [Maven学习笔记六]Maven生命周期 bit1129 maven
    从mvn test的输出开始说起   当我们在user-core中执行mvn test时，执行的输出如下：   /software/devsoftware/jdk1.7.0_55/bin/java -Dmaven.home=/software/devsoftware/apache-maven-3.2.1 -Dclassworlds.conf=/software/devs
  • 【Hadoop七】基于Yarn的Hadoop Map Reduce容错 bit1129 hadoop
    运行于Yarn的Map Reduce作业，可能发生失败的点包括 Task Failure Application Master Failure Node Manager Failure Resource Manager Failure 1. Task Failure 任务执行过程中产生的异常和JVM的意外终止会汇报给Application Master。僵死的任务也会被A
  • 记一次数据推送的异常解决端口解决 ronin47 记一次数据推送的异常解决
    　　 需求：从db获取数据然后推送到B         程序开发完成，上jboss,刚开始报了很多错，逐一解决，可最后显示连接不到数据库。机房的同事说可以ping 通。 　　  自已画了个图，逐一排除，把linux 防火墙　和　setenforce　设置最低。 　　　service iptables stop
  • 巧用视错觉-UI更有趣 brotherlamp UIui视频ui教程ui自学ui资料
    我们每个人在生活中都曾感受过视错觉（optical illusion）的魅力。 视错觉现象是双眼跟我们开的一个玩笑，而我们往往还心甘情愿地接受我们看到的假象。其实不止如此，视觉错现象的背后还有一个重要的科学原理——格式塔原理。 格式塔原理解释了人们如何以视觉方式感觉物体，以及图像的结构，视角，大小等要素是如何影响我们的视觉的。 在下面这篇文章中，我们首先会简单介绍一下格式塔原理中的基本概念，
  • 线段树-poj1177-N个矩形求边长（离散化+扫描线） bylijinnan 数据结构算法线段树
    package com.ljn.base; import java.util.Arrays; import java.util.Comparator; import java.util.Set; import java.util.TreeSet; /** * POJ 1177 (线段树+离散化+扫描线)，题目链接为http://poj.org/problem?id=1177
  • HTTP协议详解 chicony http协议
    引言                                 
  • Scala设计模式 chenchao051 设计模式scala
    Scala设计模式                我的话： 在国外网站上看到一篇文章，里面详细描述了很多设计模式，并且用Java及Scala两种语言描述，清晰的让我们看到各种常规的设计模式，在Scala中是如何在语言特性层面直接支持的。基于文章很nice，我利用今天的空闲时间将其翻译，希望大家能一起学习，讨论。翻译
  • 安装mysql daizj mysql安装
    安装mysql   (1)删除linux上已经安装的mysql相关库信息。rpm  -e  xxxxxxx   --nodeps (强制删除)      执行命令rpm -qa |grep mysql 检查是否删除干净   (2)执行命令  rpm -i MySQL-server-5.5.31-2.el
  • HTTP状态码大全 dcj3sjt126com http状态码
    完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b3Iub3JnLw%3D%3D在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request
  • asihttprequest上传图片 dcj3sjt126com ASIHTTPRequest
    NSURL *url =@"yourURL"; ASIFormDataRequest*currentRequest =[ASIFormDataRequest requestWithURL:url]; [currentRequest setPostFormat:ASIMultipartFormDataPostFormat];[currentRequest se
  • C语言中，关键字static的作用 e200702084 C++cC#
    在C语言中，关键字static有三个明显的作用： 1)在函数体，局部的static变量。生存期为程序的整个生命周期，（它存活多长时间）；作用域却在函数体内（它在什么地方能被访问（空间））。 一个被声明为静态的变量在这一函数被调用过程中维持其值不变。因为它分配在静态存储区，函数调用结束后并不释放单元，但是在其它的作用域的无法访问。当再次调用这个函数时，这个局部的静态变量还存活，而且用在它的访
  • win7/8使用curl geeksun win7
    1.  WIN7/8下要使用curl，需要下载curl-7.20.0-win64-ssl-sspi.zip和Win64OpenSSL_Light-1_0_2d.exe。 下载地址：  http://curl.haxx.se/download.html 请选择不带SSL的版本，否则还需要安装SSL的支持包   2.  可以给Windows增加c
  • Creating a Shared Repository; Users Sharing The Repository hongtoushizi git
    转载自：   http://www.gitguys.com/topics/creating-a-shared-repository-users-sharing-the-repository/ Commands discussed in this section: git init –bare git clone git remote git pull git p
  • Java实现字符串反转的8种或9种方法 Josh_Persistence 异或反转递归反转二分交换反转java字符串反转栈反转
    注：对于第7种使用异或的方式来实现字符串的反转，如果不太看得明白的，可以参照另一篇博客： http://josh-persistence.iteye.com/blog/2205768   /** * */ package com.wsheng.aggregator.algorithm.string; import java.util.Stack; /**
  • 代码实现任意容量倒水问题 home198979 PHP算法倒水
    形象化设计模式实战             HELLO!架构                     redis命令源码解析   倒水问题：有两个杯子，一个A升，一个B升，水有无限多，现要求利用这两杯子装C
  • Druid datasource zhb8015 druid
    推荐大家使用数据库连接池 DruidDataSource. http://code.alibabatech.com/wiki/display/Druid/DruidDataSource DruidDataSource经过阿里巴巴数百个应用一年多生产环境运行验证，稳定可靠。 它最重要的特点是：监控、扩展和性能。 下载和Maven配置看这里： http
  • 两种启动监听器ApplicationListener和ServletContextListener spjich javaspring框架
    引言:有时候需要在项目初始化的时候进行一系列工作，比如初始化一个线程池，初始化配置文件，初始化缓存等等，这时候就需要用到启动监听器，下面分别介绍一下两种常用的项目启动监听器   ServletContextListener  特点: 依赖于sevlet容器，需要配置web.xml 使用方法: public class StartListener implements
  • JavaScript Rounding Methods of the Math object 何不笑 JavaScriptMath
        The next group of methods has to do with rounding decimal values into integers. Three methods — Math.ceil(),  Math.floor(), and  Math.round() — handle rounding in differen
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他