fontawesome 图标怎么安装

发布网友发布时间：2022-04-21 17:40

共3个回答

热心网友时间：2022-05-13 04:20

　　估计很多前端人员都知道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一次性删除所有隐藏图层和空白无内容图层方法　　删除所有隐藏图标　　点击图层面板右上角菜单，选择【删除隐藏图层】，这样软件会自动删除所有的隐藏的图层了。　　删除所有空白图层　　点击【文件】菜单，选择【脚本 – 删除所有空图层】，这样软件就会删除所有空白、无内容的图层啦　　以上方法很简单，特别对于大文件处理，还是很有帮助的。

热心网友时间：2022-05-13 05:38

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="＃"> Home</a>
<a class="list-group-item" href="＃"> Library</a>
<a class="list-group-item" href="＃"> Applications</a>
<a class="list-group-item" href="＃"> Settings</a>
</div>







别的，font awesome 和BootStrap连络可以达到更好的结果。

热心网友时间：2022-05-13 07:13

下载引入css文件，需要图标的地方写下