图标字体代码

⑴ 如何应用Font Awesome矢量字体图标

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连络可以达到更好的结果。

⑵ “icon-menu:before { content: '\e80e”这段代码是什么意思

意思改厅盯是这是一个字体图标。

⑶ 如何在HTML中使用图标字体

首先,需要有这么个"图标主体"库 ，其次把这个"图标字体"库,引入html页面是图标字体库对应的css引入html ，最后使用"图标字体"库 具体操作。

⑷ CSS 字前面插入图标的代码

首先这是个li标签，在li里面，有个装图片的b标签，再给个span写字，然后给它们各自定位即可。
具体代码<li style="枯码position:relative"><b style="width:13px;height:13px;background:url(images/1.jpg) no-repeat;display:block;position:absolute;left:0px;top:0px;"></b><span style="margin-left:20px;"昌码>哈哈</span></li>
具体情况距离自己调，图片耐败哪一定要给宽和高。

⑸ 如何在HTML中使用图标字体

1、把字符直接写在HTML文件里；
这个方法是简单比较直观，见如下代码，用一个<span>元素去包含一个字符“!”(或!)，然后给这桥凯个<span>添加一个类。这个字母在选定的字体中被映射到一个特定的图标。
<a href=”javascript:;”><span cass=”icon”>!</span>赞</a><a href=”javascript:;”><span cass=”icon”>!</span>赞</a>
为了显示效果，还需要编写样式类.Icon来决定此字符以哪种字体来显示，如下：
.icon {font-family: ‘ your-incofont -name ‘;}

2、使用css来生成内容；
不直接在HTML文件里添加字符，基消神而是用CSS来生成字符内容。代码如下
<a href=”javascript:;” class=”icon praise”>赞</a>
可以看出，添加了一个类名“praise”。神奇的事就发生在CSS中，跟上面一样，第一步先定义好字体，然后使用搏亏:before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。
.icon {font-family:’ your-incofont-name’ ;}.praise:before {content: “\f00a”; }

3、用data-icon属性
还有一种跟上面相似方法是使用HTML5的“data-”属性。如：创建一个data-icon属性。
aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。
<a href=”javascript:;”><span aria-hidden=”true” data-icon=”!”></span>赞</a>
结合一些搭配使用的CSS属性，可以写成如下代码：
[data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-i

⑹ 使用字体图标制作ICON时，字体编码 应该怎样转换

使用字体图标制作ICON时，字体编码 的转换方式，请参照下图进行：

⑺ 如何在移动端app中应用字体图标icon fonts

对于可缩放的自适应设计来讲，Icon fonts是一种惊人的解决方案。

在开发native app时，你应该记住icon fonts技术有多项超过位图的高级特性，这些特性所带来的好处会影响你的设计工作流，以及产品的最终品质。

可缩放性（Scalability）：

基于字体的icon是与分辨率无关并能缩放到任何想要程度的技术。你的图标看起来毫不关心retina,HDPI,XHDPI等等屏幕，但渲染时会根据目标设备自动调整，你将有能力应对任何当下，未来，或大多数任意规格的设备

尺寸（Size ）：

裁剪到正确的比例，icon font的文件的大小要比起位图小到难以置信的程度，使用icon font时，你不需要根据不同设备准备不同的图片，你的APP只需要在启动时加载一次icon font文件即可。

可维护性（ Maintainability ）：

自你的icon打包进一个字体文件，在项目自始至终你仅需要维护这个单一的字体文件。

通过管理字体文件你可以很自然的组织你的icon集合，任意的进行修改或扩展

可推广性（Adoption）：

然而，应用这样的icon fonts可能会影响你和你同事之间的工作流程，但说服让他们采用这样的技术也非常简单，有数款免费或收费的工具帮你轻松达到目的并能看到很好的应用结果，在几乎任意（手机）移动平台、浏览器或操作系统

灵活性（Flexibility）：

应用icon fonts技术中最有意义的一项能力是可以操纵icon fonts， 改变颜色，大小，仅仅几行代码就可以在瞬间改变外观

可交互性(Interactivity)：

由于灵活性以及能够通过代码方便的操纵，icon fonts 是独一无二的在运行时被操纵，通过应用icon fonts技术， 你能轻松的在不同状态显示对应的不同效果，创建动画。

虽然icon
fonts为设计提供了众多好处为一些有趣的设计提供可能性，自然地，它也不是全权的解决方案。一旦你的设计中需要的颜色超过一种，实现复杂的视觉设
计，icon font就有限制了。无认如何，主流与非主流的icon
fonts都能在互联网上找到，在我们使用之前web设计界已经很流行了，并有很多服务帮你创建梦幻的icon fonts集合

通过xcode中的outlet connection, 在view呈现后，你还能很方便的改变label

Using icon fonts on iOS

在IOS中使用字体图标

在IOS中应用icon font非常的简单粗爆。在一开始你最好通过使用Fontello或IcoMoon收集一些图标并整合进你的APP。另一种方法是你自己花时间自己做出来，但创造性的工作的总要花掉你很多时间。

那么现在我们仅仅需要将得到的icon整合进我们的APP

你只需要懂得IOS开发基本的文件结构以及.tff后缀的字体文件icon font

为了测试icon font技术，我们在Xcode内新建一个 Single View Application 的工程。工程建完后就把你的字体文件复制进工程目录，如果不出什么意外，你应该在你的 Project Navigator 中看到对应的字体文件了

为了让Xcode理解你将要如何使用导入的文件，你得在你的应用程序的Info.plist内建立“链接”。这个plist文件在Supporting
Files文件夹内，表现为meta
data即可理解为hash表。为了在编译app时能包含进你的字体文件，在list上简单新建一行（右键然后add row）名字选择为 Fonts provided by application ，在其下给字体文件取个名字，名字就是你的应用程序中用来识别你的字体文件的。在我们这个测试工程中，值为fontello.ttf。现在Xcode知道了我们导入的文件能干什么，我们能在程序中使用导入的字体文件了

把你的app切换到storyboard模式，在view中你喜欢的地方放一个label组件用来显示icon，在设置完label后，我们需要建立一个outlet。

在storyboard中做这些事情都很简单，在 Assistant Editor Mode模式下

此模式下显示了你的图形界面和ViewController界面。现在简单的按住ctrl键，从label组件拖动就会现线条，直接拖线条到
ViewController到@interface这行代码上放开就会弹出一个小界面，输入名称，比如
iconLabel，outlet就建成了，代码中你会发现多了下面这样一行：

@property (weak, nonatomic) IBOutlet UILabel *iconLabel

现在你就能通过代码来控制label组件了，通过编辑ViewController（.m后缀的文件）设置label。在viewDidload方法内加入以下几行代码，就像下面那样

( void)viewDidLoad{
[super viewDidLoad];

[iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]];
[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}

添加的第一条代码用来定义字体应用于label并设置字号，这里我们设置了130pt

在使用这些命令时要注意字体名称，这里要填写字体的真实名称，即在字体簿打开的字体名或任何其它编辑器内能显示的字体名称。特别注意这点，因为字体名很可能与字体文件名称不一样

在第二行中文字用Unicode字符 Hammer and Pick (2692) 编码。

虽然有点神秘，获取icon字体的unicode字符编码还是比较容易的。可以使用字体编辑器，或者直接上传到Icon Moon这类网站，你可以毫不费力的将icon字体转换成unicode编码

你可以通过Android XML 语法来申明任何你想要的UI属性

Colours, gradients and shadows

现在icon“引用”已经建立，你都搞定了。在我们通过代码操作label前，你得先运行看看你的工作成果。最终，这也是你将icon字体合并进app所要做的。从现在开始有趣的事儿才开始。文本的所有操作都由你掌控了，例如：颜色，透明度，渐变，阴影。

例如应用以下几行代码 ，让icon变成红色+阴影：

iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

有许多效果可以使用。一些相对来说比较复杂，但所有文本效果都通用。动画或任何复杂的操作只要你能想到的都可以做了

Using icon fonts on Android

在Android中应用字体图标

同样的，在开发Android应用时也一样能使用icon fonts就像用在ios上面一样，能得到一样的好处。

就应用范围而言，Android更加有意思更有用。因为Android有着更多不同分辨率，不同屏幕的设备平台。最重要的是Android默认不支持矢量图形，这对开发者和设计人员面对不同Android设备时可是一个重大打击

在开始开发你的新Android应用之前，你仅需要知道一个app最基本的文件构架，同样的icon
font文件也是.tff后缀，使用包含了Android ADT的Eclipse IDE，你可以开始新建一个Blank
Activity的Android Application
Project。在项目设置后，复杂.tff文件到你的资源文件目录内。一旦复制成功，Package Explorer面板内应该能看到

接下来，在你的Main Activity
View内创建一个TextView。你可以在layout文件夹内找到你的资源文件。文件名应该是
activity_main.xml。在多数情况下，Android SDK已经将一个文本为“Hello
world”的TextView放到了你的View内，我们就能使用这个TextView了。

在定义Icon各属性后，你能在模拟器内看到你的icon了。

为了操作TextView,我们需要将图形模式切换到切换到XML View内。现在为TextView添加一个ID，以便接下来UI和代码建立引用关系

你的TextView应该看起来像下面这样

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />

通过使用ID，我们能够在APP内任何地方操作TextView。现在你可以切换到MainActivity.java文件添加一些代码来加载icon font了。在 MainActivity内有一个方法名为onCreate的方法。加载和应用icon fonts都在此方法内，如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");

和上面的IOS例子很像，通过引用到label组件，我们告诉Android应该使用哪个自定义字体到TextView上面。之后几行使用Unicode字符编码，这次以JAVA方式而已。运行程序后你就可以看到你的icon在Main Activity的View上了

在应用成功后，你可以根据你的需要操作icon了。Android UI构建通常由interface
builder或组织XML文件来实现，要添加一些效果，只要回到Main Activity的XML部分找到添加了Label
ID的地方，添加一些代码就可。例如添加以下代码会让你的icon变大，带点透明的红色，并伴有阴影。
android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />

有很多的效果可以应用。就像在IOS中一样，动画或者复杂的操作都由你掌控了。最大的好处是自定义的icon fonts可以广泛的适配各类操作系统。任何支持自定义icon fonts的平台都允许你使用全新的这些效果

⑻ 如何在excel中插入太阳多云雨伞的图标

在察灶“插入”选项下的“符号败拿扮”中，敏枣字体MSGoghic 中的伞，字符代码2602。

详见附图

⑼ 《吃鸡》字体颜色代码复制怎么操作

《和平精英》彩色字体代码是不可以复制的，可以自己打出来。

工具：苹果手机 iPhone8

系统：森卜iOS 14.2

一、首先进入到游戏中。如下图所示。

⑽ 如何灵活利用免费开源图标字体

可以用这些图标字体创建自己的输入法，也可以在网页上直接生成字体，或者集山悄成到自己的裤唯消软件里胡知供输出使用，总之源代码都给你了，用起来还是很方便的。