fontawesome怎么使用,如何使用Font Awesome字体图标
fontawesome怎么使用,如何使用Font Awesome字体图标详细介绍
本文目录一览： font awesome在bootstrap 怎么使用方法
很简单了，font-awesome就是一个字体库，他有自己的样式文件，下载好font-awesome然后把它的css文件引入页面,需要使用的时
候就<i class="fa
fa-search">这样就好了，具体的类看font-awesome的官方文档，很齐全。
一、常规用法
font awesome的常规用法和bootstrap里的icon一样，只需要在内联元素上应用相应的样式即可。如
<1 class="icon-camera-retro">
不同的是，对于所有的图标，font awesome提供了4种所当大小的设置样式，分别是：.icon-large、.icon-2x、icon-3x和.icon-4x，主要对图标放大相应的倍数。
放大1倍
;
放大2倍
;
放大3倍
;
放大4倍
;
icon图标集也支持bootstrap里的左右浮动功能：pull-left、pull-right。用法如下：
；
icon样式在其他元素（比如button、链接或者add-on）上的使用方法和bootstrap提供的glyphicon样式用法一致，可以一同使用
二、list列表上的图标
经常使用数字（或者圆点）显示列表li元素的界面已经太古老了，font-awesome提供了令人欣喜的新功能，即将自定义图标作为li元素的标识符显示，讲icon-ul和icon-li分别应用在ul和li元素上。示例如下：
- Display
- Float
- Clear
- Position
- Text-align
- Box-shadow
- Box-sizing
- Transform
实现效果如图：
fontawesome怎么放进word
步骤如下：
1 下载Font Awesome到本地，并安装改字体，字体名称为FontAwesome.
2 创建一个winform应用程序，并在Form界面设计如下：
代码如下：
1 using System;
2 using System.Collections.Generic;
3 using System.ComponentModel;
4 using System.Data;
5 using System.Drawing;
6 using System.Linq;
7 using System.Text;
8 using System.Windows.Forms;
9
10 namespace WinFormFont
11 {
12 public partial class IconFontDemo : Form
13 {
14 public IconFontDemo()
15 {
16 InitializeComponent();
17 //必须是unicode码
18 this.label1.Text = "\uF028";
19 this.label1.Font = new Font("FontAwesome", 16);
20 this.label1.ForeColor = Color.Green;
21 //必须是unicode码
22 this.textBox1.Text = "\uF029 jackwangcumt";
23 this.textBox1.Font = new Font("FontAwesome", 16);
24 this.textBox1.ForeColor = Color.Black;
25 }
26
27 private void button1_Click(object sender, EventArgs e)
28 {
29 int fontsize = int.Parse(this.textBox2.Text);
30 this.label1.Font = new Font("FontAwesome", fontsize);
31 this.textBox1.Font = new Font("FontAwesome", fontsize);
32 }
33 }
34 }
3 运行，界面如下：
更改字体大小，单击刷新，可以看到字体图标都变大了喽：
字体编码如何获取：
可以借助word中的插入符号，然后选择该字体，然后点选需要的图标，看下面的unicode编码即可：
如何引用font awesome
如何才能将如此绝佳的Font Awesome Icons引用到自己的网页上呢？下面做详细介绍。
最简单的方式：BootstrapCDN （由MaxCDN提供）
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！将以下代码粘贴到网页HTML代码的 部分.
简单方式之一：使用默认CSS
如果您使用了默认的Bootstrap CSS样式，那么你可以使用这种方式来引入默认的Font Awesome CSS样式。
复制整个 font-awesome 文件夹到您的项目中。
在HTML的 中引用font-awesome.min.css。
简单方式之二：LESS Ruby Gem
自行安装：$ gem install font-awesome-sass
进阶方式：自定义 LESS 或 SASS
将Font Awesome字体库下载到你的网站服务器中，在HTML的 中引用font-awesome，此时你就可以在任何地方以下面这种简单方式引用图标：
还可以使用 fa-border 以及 pull-right 或 pull-left、fa-spin等指令制造出旋转、边框等特效。
如何使用Webpack打包字体font-awesome
这次给大家带来如何使用Webpack打包字体font-awesome，使用Webpack打包字体font-awesome的注意事项有哪些，下面就是实战案例，一起来看一下。1. 首先安装依赖:npm install style-loader css-loader file-loader font-awesome-webpack --save-dev2. 在入口文件中引入font-awesomerequire('font-awesome-webpack');3. 设置webpack.config.js处理字体文件这里有两种方式，如果你不想单独生成字体文件，而是想把字体文件和css文件构建到一个文件中，可以使用url-loader，设置如下： module: { rules: [ // 省略其他配置... // font-awesome { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'url-loader?limit=1000000' }, // 省略其他配置... ] }这里给url-loader传递了一个参数limit，并且设置得比较大，这个数字可以自定义，但是一定要保证大于最大字体文件的大小，因为这个参数是告诉url-loader，如果文件小于这个参数，那么就以Data Url的方式直接构建到文件中。使用这种方式最方便，但是缺点就是构建出来的文件特别大，并且在线上的时候没办法使用cdn缓存文件，不建议部署到线上。第二种方法就是制定url-loader或者file-loader在构建的时候文件的输出目录，这样在部署的时候font-awesome就会依赖在构建时指定目录下的字体文件，而不会出现找不到字体文件的问题了，此时，webpack的构建配置如下： module: { rules: [ // 省略其他配置... // font-awesome { test: /\.(eot|svg|ttf|woff|woff2)\w*/, loader: 'file-loader?publicPath=/static/res/&outputPath=font/' }, // 省略其他配置... ]}经过上面的配置构建的工程，font-awesome就会到“/static/res/font/”目录下寻找指定的字体文件，而同时在你构建的工程中也会生成对应的font文件夹，你只需要将这个font文件夹中的字体文件拷贝到“/static/res/font”目录下（如果publicPath为“./”，表示你直接依赖构建目录下的font文件，则不用拷贝），这样当你访问你的页面时就能够正确请求到字体文件了。相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Node.js+console输出日志文件实例分析如何使用Vue实现拖拽效果
如何使用Font Awesome字体图标
Font Awesome字体图标十分精美，如何在photoshop等图像编辑软件中使用Font Awesome字体图标呢？
工具/原料
Font Awesome4.2.0
photoshop
方法/步骤
如果您还没有Font Awesome字体，那么请先下载它。下载地址：http://fontawesome.io/
解压Font Awesome字体压缩包，找到fonts文件夹，在文件夹中找到FontAwesome.otf文件，双击安装字体。
重启photoshop，确保字体被载入。
打开这个页面：http://www.htmleaf.com/ziliaoku/font-awesome/2014100887.html，找到您想要的图标，将其复制下来。
回到photoshop,使用字体工具将复制的内容粘贴到画布上。此时得到的是乱码，选中文字，将字体改为刚刚安装的Font Awesome字体，神奇的事情是不是发生了！^_^
如何在PS上使用Font Awesome字体
先把此字体安装到系统（附字体压缩包，解压安装即可）
切换到文本工具，在画板上单击，打开字符面板（Ctrl+T），在字体列表中找到此款字体，输入需要的字母即可
如何在页面中使用Font Awesome字体图标
如何在页面中使用Font Awesome字体图标
创建一个新的库
成功注册新账号或登录上Github之后，我们需要创建一个新的库来开始我们的征程。
点击位于顶部靠右账号id旁边的(+)按钮，然后点击“New Repository”。
Add new repository
点击创建一个新的库之后，我们进入了填写所需信息的页面。
adding repository information
填写好信息之后，我们点击绿色的“Create repository”按钮。
这些步骤都做完之后，我们将看到类似于下面这张图的页面。
repository github
①首先，需要有这么个"图标主体"库
②其次，把这个"图标字体"库,引入html页面(是图标字体库对应的css引入html)
③最后，使用"图标字体"库
具体操作：
制作"图标字体"：
①这里以http://www.iconfont.cn为例子，来制作:
首先，打开网址后，页面右侧有登录按钮，先进行登录操作(后面会说明外面为什么选择登录，也可以不登录。但我还是建议登录。)
②制作图标，这个制作的图标是要svg格式的可以找自己公司的设计师去设计，也可以在里面的图标库搜索自己需要的图标的名称，比如"首页，分类"等。
③ 点击自己选择的首页和分类，它会在这个位置出现：
④然后点击下载到本地，就自动下载一个叫"iconfont.zip"的压缩包。这个就是图标字体库。解压这个压缩包可以发现有这些文件：
1部分是指图标内容，可以忽略，但不能删除
2部分是指图标css，不能删除
3部分是使用图标的示例dome，可以删除(建议保留)
⑤使用图标：
打开dome.html,在浏览器中可以看到，相关的下载的图标，以及如何使用。这里可以我提一下，使用图标有2中方式，1是以内容的形式使用，2是以css 的形式使用：
怎么调整font awesome图标大小
font awesome 是一种字体，控制图标的大小，是通过 font-size 来实现的，before 字体大小 font-size 继承父亲。
找到对应的元素，修改 font-size 就可以实现控制图标大小了。
font awesome 是一种字体，控制图标的大小，是通过 font-size 来实现的，before 字体大小 font-size 继承父亲。
找到对应的元素，修改 font-size 就可以实现控制图标大小了。
font awesome 是一种字体，控制图标的大小，是通过 font-size 来实现的，before 字体大小 font-size 继承父亲。
找到对应的元素，修改 font-size 就可以实现控制图标大小了。
1、首先在css中复制一个样式文件（如果使用的是less和sass版的到相应的文件夹）；将fonts文件复制。
2、将上述复制的两个文件粘贴到项目中，打开font-awesome.css的文件，根据红框的显示可以知道，css目录和fonts目录是同级的，注意以免找不到图标文件。
3、项目中引入样式文件，直接link进来就行了。
4、应用字体图标class中的fa必须，然后用你选取的图标名称前+“fa-”。
5、最后如下图红框所以，成功应用了Font Awesome图标了。
如何在AxureRP7中使用FontAwesome字体
我们使用Axure制作原型时，经常会使用到各种小图标。有些朋友自己制作、有些到网上下载，然后使用截图导入到Axure中使用。这样做非常繁琐，有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用图标字体呢？答案是：可以！
在AxureRP7中使用FontAwesome字体，这是一个非常实用的小技巧，现发布成文与诸君共享。
第一步：下载
FontAwesome 字体 ： http://yunpan.cn/cytakifcnYz6j （提取码：fa4d）
Axure 字体部件库 ：http://yunpan.cn/cyXw7JszvyPmh （提取码：53db）
第二步：双击 font-awesome.zip 安装 Font-awesome 字体到你的电脑里
第三步： 打开Axure RP，载入 FontAwesomeV321.rplib 这个部件库
第四步： 添加下面的 Font Awesome CSS 链接到 生成HTML时弹出对话框的 Web 字体 中，然后点击关闭。
http://netdna.bootstrapcdn.com/f … ss/font-awesome.css
至此，FontAwesome 字体已经安装完毕。
使用方法：
1. 在 Axure 部件库列表中，选择 FontAwesome321 部件库，然后就想操作其它部件一样，拖放使用。
2. 打开 FontAwesome3.2.1 版本的参考页面 http://fontawesome.io/3.2.1/cheatsheet/ ，复制你想要的图标，然后粘贴到 Axure 中使用
注意：如果你复制图标到 Axure 中，并没有正常显示。 请选中该图标，然后将字体设置为 FontAwesome 即可。
最后：因为这些小图标其实使用的是字体图标，所以你可以使用改变字体大小和颜色来自定义小图标的样式。