fontawesome 图标怎么安装

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了fontawesome 图标怎么安装相关的知识，希望对你有一定的参考价值。

　　估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方便多了，下面我们说说方法。 　　STEP 1：下载Fontawesome字体 　　官方下载地址：fortawesome.github.io/Font-Awesome 　　下载后，将TTF文件安装到系统的字体目录。 　　STEP 2：在PS或AI上使用Font Awesome图标字体 　　打开Cheatsheet页面：fortawesome.github.io/Font-Awesome/cheatsheet/ 　　选中你需要的图标，复制，如下图： 　　STEP 3： 　　在PS或AI上粘贴上去(文字输入状态下)，这时你可能看到是这样的，别急，看下面。 　　那是因为我们没有选择字体，把字体选择为Font Awesome就OK了，如下图： 　　好了，如果还有不懂的请在本文下方留言。 　　另附PS一次性删除所有隐藏图层和空白无内容图层方法 　　删除所有隐藏图标 　　点击图层面板右上角菜单，选择【删除隐藏图层】，这样软件会自动删除所有的隐藏的图层了。 　　删除所有空白图层 　　点击【文件】菜单，选择【脚本 – 删除所有空图层】，这样软件就会删除所有空白、无内容的图层啦 　　以上方法很简单，特别对于大文件处理，还是很有帮助的。 参考技术A Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等，可以免费用于贸易项目。
下面仅记录应用步调：

1.到官网高低载最新版本的Font Awesome.

2.解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesome.css和font-awesome.min.css），fonts下有有5个，如下：

3.在须要应用的html或者其它类型的页面中引入样式文件，如下：

<link href="css/font-awesome.css" rel="stylesheet" />

4.查看font-awesome.css文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：

＠font-face

font-family: ""FontAwesome"";

src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;

src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;

font-weight: normal;

font-style: normal;



必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。

4.最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：

<div class="list-group">
<a class="list-group-item" href="＃"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="＃"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="＃"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="＃"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-3x"></i>

别的，font awesome 和BootStrap连络可以达到更好的结果。本回答被提问者采纳 参考技术B 下载引入css文件，需要图标的地方写下

将 fontawesome 图标设置为占位符

【中文标题】将 fontawesome 图标设置为占位符【英文标题】：set fontawesome icon to a placeholder 【发布时间】：2019-09-08 20:28:21 【问题描述】：

我尝试了在这里找到的不同解决方案，但没有任何效果。我需要的是将 fontawesome f14a 设置为一个字段 怎么了？

document.getElementById('property_charges').setAttribute('class', 'fontawesome-placeholder');
document.getElementById('property_charges').placeholder = '&#f14a';

和css：

.fontawesome-placeholder 
  //padding:10px;
  //font-family: FontAwesome;
  //z-index: 9999;
  //z-index: 1;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;

关于“重复”的建议解决方案不起作用 + 我不想在我的项目中使用 Jquery

【问题讨论】：

Use Font Awesome Icon in Placeholder的可能重复 “建议的解决方案不起作用” - 哪一个？您现在提到了一个可能的重复项，并且已经有两个答案……现在我们应该知道您的意思是什么？请更具体一点。如果答案不符合您的要求，请直接在其下方发表评论。 【参考方案1】：

使用 JS/jQ 和 unicode 时，必须在正斜杠后添加 u。不要使用 HTML 实体，除非您打算将其直接放入 HTML。还有一些必需的 CSS 样式。

document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon 
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<input id='fa' class='icon'>

【讨论】：

很好，谢谢！无论如何，你在使用 symfony/webpack-encore 吗？因为它打破了“默认样式” 不客气，除了演示中的内容外，不要不使用任何东西。尝试删除 .icon 类中的样式，font-family: "Font Awesome 5 Free" 除外。这也是 FA5 确保您使用的是正确的版本。如果您使用的是 FA4，将 font-family 更改为 FontAwesome 仍然可以工作。 获取信息：当我使用 setAttribute('class', 'blabla') 时，我正在删除 Symfony 字段中使用的默认类，请改用 .classList.add('new-class') 【参考方案2】：

假设您的目标是使用 Font Awesome 作为占位符并在用户输入值时恢复字体，那么您不需要 JavaScript。这可以通过使用 ::placeholder 单独使用 CSS 来完成。

（请注意，您缺少一个“x”：&amp;#f14a --&gt; &amp;#xf14a;）

#property_charges::placeholder 
  font-family: "Font Awesome 5 Free";

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<input id="property_charges" placeholder="&#xf14a;">

（在我的示例中，我的字体名称必须是 "Font Awesome 5 Free"，因为我使用的是 Font Awesome 5。如果您使用的是旧版本，您的字体可能会保留为 FontAwesome。）支持>

【讨论】：

【参考方案3】： 

document.getElementById('fa').setAttribute('placeholder', '\uf14a');
.icon 
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<input id='fa' class='icon'>

【讨论】：

以上是关于fontawesome 图标怎么安装的主要内容，如果未能解决你的问题，请参考以下文章

安装Fontawesome4字体图标

vue 安装 fontawesome

图标（fontawesome，材料图标）闪烁！/？问题

将 fontawesome 图标设置为占位符

如何在 Xamarin Android 中使用 FontAwesome 图标

[react] 在React中怎么使用字体图标？