ionic自定义字体图标

让我来教你使⽤css中的字体图标的⽅法⾸先什么是字体图标呢，那就是表⾯上是图标，其实它是⽂字，我们可以就像设置⽂字⼀样去设置字体图标，⼀般可以使⽤两种⽅式去设置字体图标，⼀种是引⼊css⽂件，然后设置特殊的class就可以了；另外⼀种是通过伪元素中的content去设置，下⾯跟我⼀起来看看如何设置吧！1：引⼊css⽂件，然后设置特殊的class去使⽤字体图标我使⽤iconfont官⽹来进⾏实验，⾸先使⽤百度搜索iconfont，进⼊官⽹之后登录，登录之后先去新建⼀个项⽬，⾸先打开我的项⽬：点击新建项⽬图标：然后输⼊项⽬名称，点击新建：之后就可以去上⽅搜索框搜索你想要的图标了，例如输⼊“天猫”，点击回车，然后把⿏标放在你想要的图标上⾯，点击购物车图标添加⼊库：之后在右上⾓打开购物车图标，点击添加⾄项⽬，选择你的项⽬名称点击确定就可以了，我的项⽬名称是“HelloWorld”：之后就会进⼊我的项⽬⾥⾯，该项⽬正是你上⾯添加图标的那个项⽬，如果你想在本地使⽤的话，点击下载⾄本地：下载完成之后解压，把解压⽂件中最⾥⾯的所有⽂件（以css、eot、woff等结尾的⽂件）复制到我项⽬下⽅的某⽂件夹下，该⽂件夹可以随意命名：之后在html⽂件⾥⾯引⼊⾥⾯的iconfont.css⽂件：使⽤的⽅法是在我想要放置图标的元素的class中⾸先加⼊iconfont，之后在加⼊该图标的名称，名称如下：如果要使⽤该名称，只需要把移动到该图标上⾯，在弹出框中点击复制代码就可以了：之后就可以直接去使⽤了：其中iconfont是必须的，后⾯的是我们上⾯复制代码后的名称如果你不想下载到本地的话，你也可以使⽤在线css⽂件来做，⾸先我们找到iconfont官⽹中上述项⽬那个界⾯，⾸先点击“Font class”，然后点击“暂⽆代码，点此⽣成”，之后我们就可以看到⼀个链接：那我们就不需要下载⽂件了，也不需要导⼊相关⽂件了，只需要在使⽤图标的html代码中引⼊css⽂件：之后就可以直接去使⽤了，class依然⾥⾯需要包含 iconfont，之后需要包含图标的名称作为class，图标名称还是通过“复制代码”的⽅式获得：之后就这样写就可以了:2、通过伪元素中的content去设置通过上⾯的步骤可以把图标添加到项⽬中，由于上⾯的那种引⼊⽅式已经叙述过了，这⾥在叙述，假设我们现在已经把图标引⼊到项⽬中了，我们依然可以先下载到把项⽬下载到本地，在上⼀个⽅法中已经说了，这个也不再叙述，之后把⾥⾯以eot、woff2、woff、ttf、svg结尾的⽂件复制⼀下，然后把这些⽂件赋值在我们的项⽬中的某个⽂件⾥⾯：之后在css⽂件中引⼊这些⽂件，⽅法如下：@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff2') format('woff2'),url('../fonts/iconfont.woff') format('woff'), /* Modern Browsers */url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */url('../fonts/iconfont.svg#iconfont') format('svg');/* Legacy iOS */}以上的font-family是我们⾃⼰定义的，需要在url中引⼊这些⽂件，url()中的单引号⾥⾯是这些⽂件相对于这些css⽂件的url地址，⾥⾯的#iefix、#iconfont不能少，其中#iefix是固定不变的，⽽#iconfont中的名称是font-family中的名称，他们需要加在相应⽂件名称的后⾯，format()中的内容不能变，你可以先把上述的内容复制到你⾃⼰的⾥⾯，只根据后缀名去更改相应的url地址就可以了，别乱改不然会出错，由于我们会多次使⽤⾥⾯的图标，所以我们需要把某些属性放在公共的class中，如下所⽰：[class^="icon-"],[class*="icon-"] {font-family: 'iconfont';font-style: normal;}这代表只要class中包含有icon-就会有font-family和font-style属性，该font-family的名称就是@font-face中的font-family中的名称，如果我们需要使⽤该class属性的话，那就htm⽂件中的元素的class⾥⾯加⼊以icon-开始的名称，如下所⽰：之后我们就可以设置相应的图标了，⼀般是利⽤伪元素来设置，在css中可以这样设置：⾄于⾥⾯的content内容，前⾯的\是固定的，后⾯的e799是这⾥来的，我们回到iconfont官⽹，找到我们项⽬中的图标，在上⾯停留之后，点击编辑图标：复制“Unicode(16进制)”下⾯的内容：这就完成了如果你不想下载到本地的话，你也可以使⽤在线Unicode编码，⾸先我们找到iconfont官⽹中上述项⽬那个界⾯，点击“Unicode”，然后点击“暂⽆代码，点此⽣成”，之后我们就可以看到⼀个链接：复制链接内容，这样我们就不需要复制⽂件到项⽬中了，只需要把上述链接内容放置到css⽂件⾥⾯：@font-face {font-family: 'iconfont'; /* project id 2074612 */src: url('///t/font_2074612_ndaz958615n.eot');src: url('///t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'),url('///t/font_2074612_ndaz958615n.woff2') format('woff2'),url('///t/font_2074612_ndaz958615n.woff') format('woff'),url('///t/font_2074612_ndaz958615n.ttf') format('truetype'),url('///t/font_2074612_ndaz958615n.svg#iconfont') format('svg');}之后就在css中写：[class^="icon-"],[class*="icon-"] {font-family: 'iconfont';font-style: normal;}之后还要写上，content中的内容到底是什么在上⾯有详细说明，不在赘述：.icon-tianmao::before {content: '\e799';}然后html⽂件中的它也不能少，这些都在第⼆种⽅法中有详细解释，这⾥就不在赘述了：<i class="icon-tianmao"></i>到此这篇关于让我来教你使⽤css中的字体图标的⽅法的⽂章就介绍到这了,更多相关css字体图标内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

在线制作⾃定义字体本⽂介绍如何使⽤现有的免费⼯具制作⾃定义的字体。

我们将会⽤到下⾯⼏个免费的在线⼯具。

IconMoon是⼀个优秀的免费创建⾃定⽹页图标字体的⼯具。

提供⼀个在线的字体制作APP，也提供离线版的Chrome插件，同时还提供免费开源的图标供⼤家选⽤。

⽀持上传SVG格式的图标或者单个字符。

EverythingFonts提供了丰富的字体转换⼯具，可以把ttf，otf，wotf等字体转换为SVG格式。

使⽤上⾯两个⼯具我们就能够把⾃⼰喜欢的开源字符“搬”到我们的⾃定义字体中去。

第⼀步：使⽤字体转换⼯具把TTF转成SVG格式。

有⼀些开源的字体已经提供了SVG格式（例如：fontawesome-webfont.svg）可以下后⾯的步骤中直接上传，就不需要字体转换这⼀步了。

当我们找不到SVG格式的字体的时候就⽐较适合⽤到这个⼯具。

EverythingFonts 的字体转换器使⽤⽐较简单，a) 打开⽹页，确认没有版权问题，勾选“The EULAs of the font allow this conversion: ”b) 后点蓝⾊的“Pickup Font File”按钮从本地上传TTF字体⽂件。

c) 然后点绿⾊的“Convert”按钮就可以下载转换后的SVG⽂件了。

转换后的SVG⽂件是包含字符编码的，在后⾯我们导⼊之后别的字体的A也就会是我们⾃定义字体的A。

第⼆步：开始制作我们⾃⼰的字体打开之后免费的iconmoon图标已经显⽰在你⾯前了，可以直接选⽤也可以点击最后⾯的“Add Icons From Library…”链接去图标库⾥⾯去选。

【2】新建⼀个空的图标集，这样便于我们分类选⽤。

【4】使⽤图标集旁边的“import to set”菜单项，导⼊我们之前制作（或者开源）的.svg⽂件。

也可以在这⾥上传你⾃⼰⾃作的SVG单个字符。

【5】编辑字符如果是从别的字体导⼊过来的，有时候会发现实际排版会出现字符宽度不⼀的问题，这样的话我们就需要通过iconmoon的编辑功能进⾏修改。

自定义图集第一步：导入NGUI外部包。

这个大家都应该会吧。

第二步：准备一些图片资源，这里我借用一下2DToolKit的一些图片，并将其导入到Unity3D工程中第三步：创建图集，并为图集起名为MyAtlas，随即选图集中所需要的图片资源，点击Create。

如图：这时就会在Font&Atlas目录下生成一个Prefab文件一个Material和一个贴图此时我们自定义图集就创建完毕了。

下面我们开始创建自定义字体。

自定义字体集第四步：这里用到的是BM font工具，运行，界面如图：第五步：设置字体样式和大小，这里我用了我比较喜欢的萝莉体，并讲字体大小设置成32，字符编码选择<Unitcode>第六步：由于字量太大，我只需要少量的字，那么我需要对其进行筛选，如果你需要的多，例如聊天功能，那么就跳过这步吧。

创建一个文本文件，讲你需要的文字写在里面。

并保存为UTF-8编码筛选文字打开你刚刚建立的文本文件，然后选择第七步：导出设置第八步：导出选择保存路径，和文件名，这里我为其起名为：myFont。

随后找到myFont.fnt文件，将其扩展名改为.txt 然后讲txt和png文件导入到Unity3D的项目中第九步：自定义字体集其中Font Data中拖进你刚刚建立的txt文件，Texture拖进刚刚建立的png文件，Font Name自己随便起个名字，这里我起名叫MyFont，Atlas拖进之前图集Prefab文件，点击“Create the Font”此时项目中，就会生成你刚刚建立的字体MyFont测试：创建一个Button试试看吧，下面这个是我建立后的效果。

iconpark font class用法Iconpark是一个优秀的图标库，拥有众多精美的免费图标可供使用；同时也提供iconpark font class用法，方便用户快捷使用图标。

iconpark font class是利用iconpark提供的字体图标，通过在html的元素上添加类名，即可轻松使用对应的图标，以下依次介绍iconpark font class的使用步骤：1.打开iconpark官网，搜索需要的图标，如搜索“搜索”图标，找到对应的图标并点击进入；2.在弹出的页面中选择iconpark font class，并复制所需图标的类名，如“iprk-search”；3.在需要使用该图标的html元素中添加类名，如“<i class="iprk-search"></i>”；4.刷新页面查看效果，即可成功使用iconpark font class所提供的图标。

除此之外，iconpark font class也支持多参数的使用，如改变图标大小、颜色等操作，具体方法如下：1.改变图标大小，可通过在类名后加上“-lg”、“-2x”、“-3x”等参数，表示图标的放大倍数；2.改变图标颜色，可通过设置css属性“color”，对图标进行颜色的设定；3.同时改变图标大小和颜色，配合上述两种方法即可。

需要注意的是，iconpark font class使用前需先引入iconpark的字体文件，可通过以下步骤操作：1.进入iconpark官网；2.在首页右侧找到“自定义标签页”，点击进入；3.选择所需要的图标，点击“下载”；4.下载完成后，解压缩文件，将“iconpark.ttf”字体文件拷贝到代码中；5.在css中添加字体文件路径：“@font-face {font-family:"iconpark"; src:url('iconpark.ttf')format('truetype');}"。

利⽤WebClip实现⾃定义应⽤名字和图标1. 准备iPhone升级⾄iOS14以上 (不然可能会出现打开应⽤中间还是有⼀段空⽩页⾯过渡)参考博客 了解webclip的基本信息下载Mac App Apple configurator22. 描述⽂件解析(直接上代码了)<dict><key>PayloadContent</key><array><dict><key>FullScreen</key><true/><!-- 书签能否被删除? --><key>IsRemovable</key><false/><!-- 图标的base64编码 --><key>Icon</key><data>base64编码(实际是需要填这个字段的太长了这⾥就略了)</data><!-- 描述⽂件的标签这个是桌⾯上的名字 --><key>Label</key><string>应⽤名</string><!-- 描述⽂件的简介 --><key>PayloadDescription</key><string>这个是webClip ⽤于替换应⽤启动更换图标之类的或者⽹页书签的⼀个桌⾯快捷打开的⽅式</string><!-- 描述⽂件内层导航栏显⽰的名字 --><key>PayloadDisplayName</key><string>WebClip内部名字</string><!-- 唯⼀标识 --><key>PayloadIdentifier</key><string>com.example.appclip.apple.webClip.managed.xxxooo</string><!-- 类型 --><key>PayloadType</key><string>com.apple.webClip.managed</string><!-- UUID保证唯⼀性即可 --><key>PayloadUUID</key><string>25F701C5-1305-42D4-B6C4-0FB453940C05</string><!-- 版本号 --><key>PayloadVersion</key><real>1</real><!-- 预组装 --><key>Precomposed</key><true/><!-- 跳转的URLScheme --><key>URL</key><string>appcliplaunch://</string><!-- ⽬标app的bundleID --><key>TargetApplicationBundleIdentifier</key><string>com.sanche.AppClips</string></dict></array><!-- 描述⽂件的名字 --><key>PayloadDisplayName</key><string>WebClip描述⽂件的名字</string><!-- 描述⽂件的id --><key>PayloadIdentifier</key><string>com.example.appclip</string><!-- 描述⽂件不允许删除? 貌似⽆效啊 --><key>PayloadRemovalDisallowed</key><true/><!-- 类型 --><key>PayloadType</key><string>Configuration</string><!-- UUID保证唯⼀性即可 --><key>PayloadUUID</key><string>95EF972A-9463-4037-83B8-7B23602F5C5D</string><!-- 版本 --><key>PayloadVersion</key><integer>1</integer></dict></plist>3. 如何使⽤使⽤Apple configurator2配置好描述⽂件,然后再利⽤AirDrop传送到⼿机安装把描述⽂件托管到⽂件服务器上或者互联⽹⽹盘然后使⽤⼿机⾃带的Safari浏览器下载打开安装即可App Store下载第三⽅换图标App也可快速实现功能~ (良莠不齐,有些是要跳空⽩页再跳的,有些是跳捷径再跳的,有些是webclip处理好的~ ⽐如: 趣图标和捷径集以及捷径盒⾥的⼀些捷径)4. ⼤致原理获取bundleID,已知或者从调⽤App Store搜索api获取 ,替换TargetApplicationBundleIdentifier字段获取图标图⽚⽣成base64编码,替换Icon字段⽣成UUID等唯⼀标识,替换相关UUID标识替换应⽤名字段把各个需要替换的字段更新⽣成新的描述⽂件进⾏安装即可其实可以⼀个描述⽂件包含多个书签或者应⽤,因为内部PayloadContent那⼀层是⼀个array,我发现捷径集好像就是这样实现的⾄于签不签名好像并不影响使⽤5. 尝试⼀下这个微信替⾝(⽤⼿机Safari打开)iOS代码实现可以如下这样打开Safari加载远程配置⽂件即可:let downStr = "https:///gh/WangGuibin/MyFilesRepo/files/weixin.mobileconfig"let realURL = URL(string: downStr)UIApplication.shared.openURL(realURL!)。

CSS3⾃定义字体、字体图标⾃定义字体通常情况下，我们⼀般在设置字体的时候设置的是操作系统上的字体。

如果⽤户的操作系统中没有该字体就会影响整个前端的⼀个⽤户体验。

在CSS3 中，新增了⾃定义字体的内容，可以让我们⾃⼰定义⼀个字体，然后放到服务器上，这样尽管⽤户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响⽤户体验。

⽂件结构如下<style>/* 使⽤ @font-face 来指定⼀个⾃定义的字体 */@font-face {font-family: "Custom font"; /* 起⼀个名字 */src: url("fonts/Courier New.ttf"); /* 指定⼀下字体的位置 */}p {font-family: "Custom font"; /* 为 p 元素设置这个⾃定义字体 */font-size: 20px; /* 设置字体⼤⼩ */}</style><body><p>Hello, this text font is a custom font...</p></body>运⾏结果字体图标使⽤字体图标可以在⽹页加载的时候被快速渲染出来，减少了图⽚的请求次数，减少⽹络负担。

字体图标的优缺点优点1. 轻量性：⼀个图标字体⽐⼀系列的图像（特别是在Retina屏中使⽤双倍图像）要⼩。

⼀旦图标字体加载了，图标就会马上渲染出来，不需要下载⼀个图像。

可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

2. 灵活性：图标字体可以⽤过font-size属性设置其任何⼤⼩，还可以加各种⽂字效果，包括颜⾊、Hover状态、透明度、阴影和翻转等效果。

可以在任何背景下显⽰。

使⽤位图的话，必须得为每个不同⼤⼩和不同效果的图像输出⼀个不同⽂件。

3. 兼容性：⽹页字体⽀持所有现代浏览器，包括IE低版本。

Ionic5⼿写签名SignaturePad 测试程序下载：初始化项⽬1. ⾸先新建⼀个Ionic5的项⽬：ionic start test-1 blank2. 安装对应的npm依赖：npm install angular2-signaturepad --save3. 依赖安装完成后在app.module.ts中注册该模块：// 模块路径import { SignaturePadModule } from 'angular2-signaturepad';@NgModule({declarations: [AppComponent],entryComponents: [],// 在imports中进⾏注册imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SignaturePadModule], providers: [StatusBar,SplashScreen,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],bootstrap: [AppComponent]})export class AppModule { }创建签名页1. 签名需要屏幕上有⾜够的空间，我们新建⼀个Page页⾯专门⽤于签名：ionic g page sign2. 然后编辑sign.page.html⽂件，针对这个页⾯布局做⼀些修改（⼩弟UI功底贼差，这⾥可以⾃⾏发挥）<ion-content><!-- 撑满全屏的DIV，⽤于测量⼿机屏幕尺⼨ --><div #div class="rule"></div><!-- 画布 --><signature-pad *ngIf="isShowPad" [options]="options" class="sign"></signature-pad><!-- 操作按钮 --><div class="div-btn"><ion-button (click)="clear()" class="btn">重绘</ion-button><ion-button (click)="back()" class="btn">返回</ion-button><ion-button (click)="ok()" class="btn">确认</ion-button></div></ion-content>3. 页⾯的CSS样式：.rule { // 起到格尺的作⽤// 宽⾼撑满width: 100%;height: 100%;// 透明opacity: 0;// 脱离⽂档流position: absolute;top: 0;left: 0;// 设置⿏标穿透pointer-events: none;// 防⽌拖拽报错touch-action: none;}.sign { // 画布添加下边框起到分割线作⽤border-bottom: 1px solid #eaeaea;}.div-btn{ // 底部三个操作按钮居中显⽰text-align: center;}.btn { // 设置每个按钮的⼤⼩、间隔width: 85px;height: 40px;margin: 30px 10px;}4. 开始写JS代码（代码都写了注释，就不再解释了）：import { SignaturePad } from 'angular2-signaturepad';@Component({selector: 'app-sign',templateUrl: './sign.page.html',styleUrls: ['./sign.page.scss'],})export class SignPage {@ViewChild("div")private div: any; // 尺⼦DIV对象@ViewChild(SignaturePad)private pad: SignaturePad; // 画布private options: any; // 宽⾼参数private isShowPad: boolean; // 是否显⽰private otherPage = {that: null, callBack: null}; // 其他页⾯传来的参数(回调)constructor(private navCtrl: NavController, private navParam: ActivatedRoute) { // 设置初始值this.options = { canvasWidth: 200, canvasHeight: 200 };this.isShowPad = false;// 接收传参this.otherPage.that = navParam.snapshot.queryParams.that;this.otherPage.callBack = navParam.snapshot.queryParams.callBack;}// 页⾯加载完成在调⽤初始化⽅法ionViewWillEnter() {this.canvasResize();}// 设置画布⼤⼩canvasResize() {// 获取当前屏幕宽⾼，留出100⾼度(下边框有1px)显⽰操作按钮，let dom = this.div.nativeElement;this.options.canvasWidth = dom.offsetWidth;this.options.canvasHeight = dom.offsetHeight - 99;// 等待属性设置完成之后再显⽰画布this.isShowPad = true;}// 清空画布内容clear() {this.pad.clear();}// 确认按钮ok() {// 点击确认后将图⽚转换为Base64传给回调、然后关闭该页⾯this.otherPage.callBack(this.otherPage.that, this.pad.toDataURL());this.navCtrl.back();}// 返回按钮back() {this.navCtrl.back();}}⾸页的调⽤测试1. 签名页⾯已经绘制好了，接下来在Home组件中进⾏调⽤，编辑home.page.html：<ion-header [translucent]="true"><ion-toolbar><ion-title>请输⼊签名</ion-title></ion-toolbar></ion-header><ion-content [fullscreen]="true"><div style="text-align: center;"><ion-button (click)="openPage()">点击开始签名</ion-button><br /><img [src]="base64" style="border: 1px solid rgb(196, 196, 196); width: 80%;"> </div></ion-content>2. ⾸页这⾥就不修改样式了，能⽤就⾏，接下来是JS代码：export class HomePage {private base64: string = "";constructor(private navCtrl: NavController) {}// 打开画布页⾯openPage() {this.navCtrl.navigateForward("sign", {queryParams: {// 传⼊当前组件的this指向和回调that: this,callBack: this.setBase64}});}// 获取base64图像然后显⽰在页⾯上setBase64(that, base64) {that.base64 = base64;}}这样最简单的⼿写签名程序就完成了，运⾏查看效果：Base图⽚旋转从测试效果上来看，我们已经实现了⽬标功能，但是客户签字时肯定是横着签的，然后回显到Home页之后显⽰也会出现问题，如果把画布修改为宽⼤于⾼，画布是横过来了，但是局限于⼿机屏幕⼤⼩根本没办法签名，这⾥我在⽹上找了⼀个Base64的图像旋转代码可以使⽤：1. 创建Ionic服务：ionic g service service/util2. 在服务中添加Base64图⽚旋转代码（代码来源：export class UtilService {constructor() { }rotateBase64Img(src, edg, callback) {var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");var imgW;//图⽚宽度var imgH;//图⽚⾼度var size;//canvas初始⼤⼩if (edg % 90 != 0) {console.error("旋转⾓度必须是90的倍数!");throw '旋转⾓度必须是90的倍数!';}(edg < 0) && (edg = (edg % 360) + 360)const quadrant = (edg / 90) % 4; //旋转象限const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标var image = new Image();image.crossOrigin = "anonymous"image.src = src;image.onload = function () {imgW = image.width;imgH = image.height;size = imgW > imgH ? imgW : imgH;canvas.width = size * 2;canvas.height = size * 2;switch (quadrant) {case 0:cutCoor.sx = size;cutCoor.sy = size;cutCoor.ex = size + imgW;cutCoor.ey = size + imgH;break;case 1:cutCoor.sx = size - imgH;cutCoor.sy = size;cutCoor.ex = size;cutCoor.ey = size + imgW;break;case 2:cutCoor.sx = size - imgW;cutCoor.sy = size - imgH;cutCoor.ex = size;cutCoor.ey = size;break;case 3:cutCoor.sx = size;cutCoor.sy = size - imgW;cutCoor.ex = size + imgH;cutCoor.ey = size + imgW;break;}ctx.translate(size, size);ctx.rotate(edg * Math.PI / 180);ctx.drawImage(image, 0, 0);var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey); if (quadrant % 2 == 0) {canvas.width = imgW;canvas.height = imgH;} else {canvas.width = imgH;canvas.height = imgW;}ctx.putImageData(imgData, 0, 0);callback(canvas.toDataURL())};}}3. 然后在Home组件中引⼊这个服务，在显⽰图⽚的回调中将Base进⾏旋转：export class HomePage {// 这⾥引⼊刚刚写好的⼯具类服务constructor(private navCtrl: NavController, private util: UtilService) {}// ....省略代码// 获取base64图像然后旋转270度后显⽰在页⾯上setBase64(that, base64) {// 第⼀个参数：Base64字符串// 第⼆个参数：旋转⾓度// 第三个参数：回调，接收返回的参数就是旋转后的Base64图⽚字符串that.util.rotateBase64Img(base64, 270, res=>that.base64 = res);}}这样图⽚旋转也已经处理好了，再来测试⼀下：。

amazeui学习笔记--css（常⽤组件6）--图标Icon amazeui学习笔记--css（常⽤组件6）--图标Icon ⼀、总结1、关注⽤法即可：在 HTML 上添加添加am-icon-{图标名称} class。

<span class="am-icon-weixin"> Wechat</span>2、图标⼤⼩：.am-icon-sm，放⼤ 150%.am-icon-md，放⼤ 200%.am-icon-lg，放⼤ 250%3、icon button：在 Icon 上添加.am-icon-btn class。

<a href="##" class="am-icon-btn am-icon-twitter"></a>4、旋转动画：注意：Chrome 和 Firefox 下，display: inline-block;或display: block;的元素才会应⽤旋转动画。

<i class="am-icon-spinner am-icon-spin"></i>5、固定宽度（⾮常有⽤）：FontAwesome 在绘制图标的时候不同图标宽度有差异，添加.am-icon-fw将图标设置为固定的宽度，解决宽度不⼀致问题（v2.3 新增）。

<li><i class="am-icon-qq am-icon-fw"></i> QQ</li>6、图标不⽀持的情况可以直接写编码形式：<span>&#xf09b; What a fuck.</span>⼆、图标IconIcon⽬录Amaze UI Icon 组件⽬前使⽤了（Amaze UI 2.2.0 中升级⾄ 4.3.0），涵盖除部分国内社交⽹站图标以外的其他常见图标。

如何在移动端app中应⽤字体图标iconfonts（转）How to use icon fonts in your mobile apps在任何APP设计中实现可图形的⽮量缩放最完美的⽅式是使⽤字体图标.移动端的设计变的越来越复杂。

原因在于多样的屏幕尺⼨与不同的分辨率。

Native版APP⼏乎⽆法提供像素级别完美的视觉体验。

当我们设计APP界⾯中各种图标时，我们不得不⾯临两⽅⾯，好的⼀⾯是，使⽤真实的icons，即使⽤像素设计出吸引⽤户的交互界⾯，这样的交互界⾯能更好的帮助⽤户理解和使⽤你的APP，不太好的⼀⾯就是繁琐乏味的“重复⼯作”。

⼀旦你的杰作完成了，你得开始切⽚、组织、优化、适配等⼯作，在开发⼈员将你的视觉设计应⽤于不同设备中时，这些⼯作始终惯穿于每个项⽬。

基本上我⾮常爱⽤像素图标，但我最近发现我花太多时间在清理⽂件夹，寻找不同规格的⽬标设备。

尽管市⾯上有众多的插件帮你从单个图⽚源导出成多种⽅案的图标与图形，追踪优化各种分辨率、操作系统下图⽚的优化是项可以避免的苦差事⼉。

让我们看⼀看基于⽮量的图标字体(icon fonts)利⽤Fontello⽹站的图标字体⽣成器，我们分分钟就可以⽣成⼀组图标Friends with benefits (炮友？)当在设计产品UI时，我们许多美⼯都尽量不使⽤像素图⽚，⽽更倾向于使⽤⽮量图，是有各种原因的。

举个粟⼦，在⼀个需要快速变更需求⼜要求保质的的团队中⼯作。

保持⽂件⼤⼩的可维护，以及让UI能适应各种尺⼨屏幕，这些都是⽮量图形应⽤时的⼩功能。

⽮量图形能让你在⼀个长期的项⽬不会抓狂的渡过。

在⾯对⾃适应、加载时间或retina屏等问题时，基于⽮量图形的解决⽅案已成为基本解决⽅案了，就像CSS效果，为不同⽤户设计⾼质量的WEB UI，由于近期浏览器在⾃定义字体上的较好的⽀持，很多美⼯甚⾄将它们的icons做成web fonts，这⼀样是基于⽮量图形好处理由。

前端开发中的国际化字体与字形图标选择指南在如今全球化的互联网时代，前端开发往往需要考虑用户来自不同语言和文化背景的需求，其中选择合适的国际化字体和字形图标显得尤为重要。

本文将介绍一些选择指南，帮助前端开发者更好地进行字体和图标选择。

一、选择适配多种语言的字体在进行国际化前端开发时，首先需要考虑的是选择适配多种语言的字体。

不同语言的字符形状和排版需求有所不同，因此选择一种既能满足中文、英文等常见语言的显示效果，又能保证其他语言的可读性的字体是十分重要的。

一种常见的选择是使用系统默认字体，通过font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;来保证跨平台、跨设备的一致性。

由于系统默认字体通常支持大多数语言，可以保证文字显示的可读性，但在某些特殊情况下，可能会出现渲染不一致的问题。

此外，还可以选择开源字体，如Google Fonts中的Noto Sans和Droid Sans等。

这些字体经过全球化的考虑，支持多国语言的字符集，而且在大多数操作系统和浏览器上都能良好地显示。

二、考虑语义化和可访问性除了选择适配多种语言的字体外，还需要考虑语义化和可访问性。

语义化指的是字体的风格和表现能否与网页的主题和内容相匹配。

在前端开发中，字体的选择应该与网站或应用的设计风格和目标受众相一致，以保持整体视觉效果的统一性。

另外，还需要考虑字体的可访问性，即字体的可读性和易用性。

对于视力不佳的用户或需要使用屏幕阅读器的用户来说，字体的易读性尤为重要。

在选择字体时，应该尽量避免使用过于花俏或难以辨认的字体，而是选择清晰、易读、具有良好对比度的字体。

三、选择符号多样的字形图标字形图标（icon）在前端开发中发挥着重要的作用，它不仅可以提高用户界面的美观性，还可以传递信息和引导用户操作。

前端项⽬添加⾃定义icont图标步骤这⾥就⽤到了两个⽂件，⼀个是icontfont.css,另外⼀个是icontfont.ttf,在开发过程中，往往需使⽤到各式各样的icon图标，⽽有的图标库提供的资源并不多，由于icon图标属于字体样式，如果使⽤图⽚替代的话，缺点⽐较明显，⽐如放⼤失真，每次联⽹都要加载等。

所以往往需要⾃⼰利⽤其他的icon图标库⾃定义图标样式，下⾯借⽤阿⾥巴巴⽮量图标库为例分享⼀下如何在前端项⽬中⾃定义icon图标。

其中，红⾊字体标出来是容易漏掉的步骤。

准备好新浪博客或Github账号，登陆⼆．挑选和下载图标在搜索框搜索⾃⼰需要的图标，然后⿏标已到看中的图标上⽅，⼀个个加⼊购物车，推荐选择相同类型下的看起来尽可能⼤的图标，便于后⾯设置样式。

点击购物车，添加⾄项⽬，默认选中“链接”，点击确定，跳转到项⽬界⾯，选中右侧“链接”（默认是选中的），然后点击下载⾄本地下载下来的项⽬压缩包名是⼀串字母数字等组成，解压得到如下⽂件，其中前三个html⽂件提供的是教程，真正有⽤的是其他的⽂件三．修改相关样式将整个解压后的项⽬⽂件夹导⼊前端项⽬中如果只兼容安卓和IOS移动端的话，那么只需要iconfont.css⽂件和iconfont.ttf⽂件即可，其中iconfont.css⽂件是必需的；将iconfont.css复制到你的APP项⽬的css⽂件夹中，将iconfont.ttf放到fonts⽂件夹中（没有就新建⼀个），⽐如我的项⽬是Gfilm副本：两⽂件放的位置如下图：在css⽂件夹中打开iconfont.css⽂件，如下：@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1480523339684'); /* IE9*/src: url('iconfont.eot?t=1480523339684#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff?t=1480523339684') format('woff'), /* chrome, firefox */url('iconfont.ttf?t=1480523339684') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1480523339684#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}.icon-yanchu:before { content: "\e605"; }.icon-dianying:before { content: "\e633"; }.icon-faxian:before { content: "\e642"; }.icon-cinema:before { content: "\e60c"; }其实从后⾯的代码拼⾳或英⽂可以看出我们需要的图标。

ionic中的navigation,tabbar及返回按钮定制ionic不得不说官网的文档，真是最好的学习资源，不过有些功能没测试出来，遗憾，要定制navigation和tabbar那就不得不提$ionicConfigProvider，去官网，官网上都有详细说明不想做个翻译工了，说下一般的功能，设置tabbar的位置，在底部还是在顶部，iOS默认底部，android默认顶部，在这里就可以修改了：，使用方法可分平台如：ionicConfigProvider.platform.ios/android.tabs.position(‘bo ttom′),共用一种直接:ionicConfigProvider.platform.ios/android.tabs.position(‘bott om′),共用一种直接:ionicConfigProvide r.tabs.position(‘bottom’) 另外还有个方法:我以为是设置导航栏的返回按钮文字的，还有个backButton.icon以为是设置返回按钮的图标，不成想不是，解释也不清楚，没试出效果，有人知道望告知，看了导航栏的返回按钮文档才知道，设置导航栏返回按钮需要在这里设置，如:<ion-nav-back-button class="button-clear"><i class="ion-arrow-left-c"></i> Back</ion-nav-back-button>•1•2•3•4另外$ionicConfigProvider的其他方法文档上也有说明，就不介绍了，文档才是最新最好的学习资源。

接下来说下定制tabbar的图标，ionic已经有很多内置图标了，但是还是不能满足我们自己的应用，就要自己定制了，ionic的图标都是以字体的形式，然后用css来引入的，我们普通的图标不支持，麻烦的一件事，要制作我们自己的图标，还得制作出svg的矢量图，然后用ionic提供的转换工具制作字体文件和css样式，然后引入，网上已有有关这个的文章，这里就不介绍了，。

css字体图标的制作和使⽤。

css字体图标的制作和使⽤。

在项⽬开发的过程中，我们会经常⽤到⼀些图标。

但是我们在使⽤这些图标时，往往会遇到失真的情况，⽽且图⽚数量很多的话，页⾯加载就越慢。

所以，我们可以使⽤字体图标的⽅式来显⽰图标，既解决了失真的问题，也解决了图⽚占⽤资源的问题。

⼀：如何制作字体图标1：上⽹下载需要的图标（svg格式）,在这⾥推荐⼀个⽹站 "",这⾥⾯⼏乎囊括了⽹站制作中所有需要的图标，⽽且是免费下载，（格式，⼤⼩，颜⾊都可以⾃定义）。

2：我们打开“”这个⽹站（当然阿⾥巴巴图标库这个⽹站也可以制作），找到右上⾓这个红⾊的按钮，点击它。

3：找到左上⾓这个按钮，点击import icons这个按钮，上传你的svg格式的图标。

4：当图标上传完后，图标的背景是灰⾊的，这个时候点击你需要的图标（选中后的背景会变⽩）。

5：点击页⾯右下⾓的这个按钮，跳转页⾯后，再点击这个下载按钮，等待下载完成。

⼆：如何使⽤字体图标1：解压下载后的⽂件夹，我们需要的是fonts⽂件夹和style.css, 将这个⽂件放⼊你的项⽬中,style.css⽂件中引⼊了字体⽂件，所以会有路径，这个时候你在使⽤的时候要注意路径问题，代码如下：（这⾥的多种字体⽂件是为了兼容浏览器）@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?snsrp8');src: url('../fonts/icomoon.eot?snsrp8#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?snsrp8') format('truetype'),url('../fonts/icomoon.woff?snsrp8') format('woff'),url('../fonts/icomoon.svg?snsrp8#icomoon') format('svg');font-weight: normal;font-style: normal;}2：在页⾯中，我们只要给⼀个元素添加相应的类名就⾏，因为在style.css中已经将类名对应的图标写好了。

uni-app为组件uni-icons增加⾃定义图标（超简单）1、找到需要的图标，这⾥我是在阿⾥巴巴图标库()中找到对应的图标
下载为svg格式备⽤：
2、通过在线ttf编辑器打开uni.ttf⽂件()，打开之后可以看到所有的uni所有图标都在⾥⾯
3、导⼊第⼀步下载好的图标，导⼊之后，可以看到在最后⼀页的末尾已经有我们新增的图标了
4、点击设置代码点，新增的图标会按顺序⾃动⽣成代码
注意：先选中新增的图标再设置，否则所有的图标代码都会改变
5、导出为ttf，然后修改名称，替换掉项⽬中的uni.ttf⽂件
6、将uni.tff⽂件转为base64字符串，⼀样通过在线转换⼯具()
7、转换完之后，需要去除掉换⾏，因为该⼯具默认⼀⾏76字符，借助⼀下⽂本编辑器即可，这⾥我使⽤的是Notepad++
8、将整理好的⼀⾏字符串替换掉uni-icons.vue⽂件中原有的base64字符串
9、在icons.js中增加图标
然后就可以愉快的使⽤⾃定义图标了，完美收⼯！。

uni-app使⽤iconfont图标⾃定义图标uni-app 的uni-ui 的 Icon 图标组件，裡⾯的图标只是移动端常见的图标，对于⼀些其他需求所要显⽰的图标，这个是完全不够⽤。

那么怎么办?模仿它的组件，⽤阿⾥巴巴图标⽮量库的图标，⾃⼰定义⼀个图标组件呀。

⼀、uni-app 图标组件1、组件⽂件m-icon⾥⾯有两个⽂件，⼀个是m-icon.css⽂件⼀个是m-icon.vue⽂件2、m-icon.css3、m-icon.vue4、使⽤上⾯就是uni-app 官⽹的例⼦。

接下来我们就参考这个⾃⼰写⼀个组件。

⼆、新建组件1、uni-icon ，⾥⾯有uni-icon.css 和uni-icon.vue 两个⽂件uni-icon.css@font-face {font-family: uniicons;font-weight: normal;font-style: normal;/* 暂时先⽤官⽹的url */src:url('https:///t/font_1328537_gk9yl0aa13q.ttf') format('truetype');}.icon {font-family: uniicons;font-size: 48upx;font-weight: normal;font-style: normal;line-height: 1;display: inline-block;text-decoration: none;-webkit-font-smoothing: antialiased;}.icon.uni-active {color: #007aff;}uni-icon.vue:class="['icon-'+type]" 对应uni-icon.css ⾥⾯的 .icon-scan:before { content: "\e638";}<template><view class="icon" :class="['icon-'+type]" :style="{color:color,'font-size':fontSize,'background':background}" @click="onClick()"></view> </template><script>export default {props: {/*** 图标类型*/type: String,/*** 图标颜⾊*/color: String,/*** 图标背景颜⾊*/background: String,/*** 图标⼤⼩*/size: {type: [Number, String],default: 24}},computed: {fontSize() {var size = Number(this.size)size = isNaN(size) ? 24 : sizereturn `${size}px`}},methods: {onClick() {this.$emit('click')}}}</script><style>@import "./u-icon.css";</style>这⾥其实可以看出，其实就是和官⽹的⼀样，只是换了⼀下名字。