下载回生成的Logo之后,查看目录结构如下:

直白绘制

借助于精美的css3,我们能够利用当中部分属性绘制一些简约的Logo,如箭头等,这里大家以绘制checkbox三种处境为例:

永利集团304手机版 1

html:

<i class="icon-checkbox active"></i>    
<i class="icon-checkbox"></i>

scss:

$primary:                        #0078e7 !default;

.icon-checkbox{
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ccc;
    background-color: #fff;
    line-height: 1;
    text-align: center;
    margin-right: 5px;

    &.active{
        border-color: $primary;

        &::after{
            content: "";
            width: 8px;
            height: 3px;
            border-bottom: 2px solid $primary;
            border-left: 2px solid $primary;
            display: block;
            margin-top: 3px;
            margin-left: 2px;
            @include rotate(-45deg);
        }   
    }
}

active状态,通过after生成叁个星型,然后设置其border-bottom和border-left,再经过css3的rotate旋转45就能够,那么些勾正是两条边框。

icomoonLogo库的:

7.1引用

然后增添到一个新的wxss文件中。

本体系文章,若无特意表明,宽容安卓4.0.4+

阿里Logo库的:

unicode是字体在网页端最原始的行使措施,特点是:

永利集团304手机版 2ttf2base64

 

第五步:

把下载好的文书导入大家的工程里,如图

永利集团304手机版 3

永利集团304手机版 4

接下来就可以援引刚生成的书体Logo代码如下:
引入:

<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

修改后代:

<a >

    写文章
</a>

留意:新版iconfont支持多色Logo,这一个多色Logo在unicode情势下将不能够使用,要是有供给提出选择symbol的引用情势

在新建的wxss文本下边,开头编制字体的援用:

那边我们把Logo分为两种:背景图片,直接绘制,@font-face。如无特殊情形,Logo的标签选用i标签

一、Ali库字体Logo使用

详细在demo_symbol.html文件之中
8.1引用

.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

背景图片

第一大家会选择sprite情势,把具有的Logo都放在二个大图中,然后思量到retina屏,所以大家的图标应该设计为实在尺寸的2倍,然后设置background-size为实际尺寸。以上边包车型大巴msg
icon为例:

永利集团304手机版 5

图中的各样icon大小为24px,实际使用时,大家是以12px来行使的:

%icon-msg{
    display: inline-block;
    vertical-align: -2px;
    background:url(..icon-msg.png) no-repeat;
    background-size:26px 26px; // 整个sprite图片大小的一半,注意不要采用50%,百分比是按元素大小来计算的,而不是背景图片大小
}
.icon-info{
    @extend %icon-msg;
    background-position: -14px 0;
    width: 12px;
    height: 12px;
}
.icon-alert{
    @extend %icon-msg;
    background-position: 0 -14px;
    width: 12px;
    height: 12px;
}
...

本来一时Logo非常少,大家为了减小央浼,也足以一直把图纸转成base64格式写在css中,这里推荐贰个在线转的工具:Encode
Data URL

字体Logo平时采用的是

7.2unicode运用手续如下:

永利集团304手机版 6目录结构

@font-face

以sandal的字体Logo为例,假设你感到那么些Logo不合乎你,你能够自身在icomoon中采取合适的。

永利集团304手机版 7

sandal中字体图标使用方法:

1、下载sandal放在d盘目录下,在您的scss文件中程导弹入sandal的base文件(若是不供给转变样式,则导入function文件就可以)及font-face文件

@import "d:/sandal/base";
@import "d:/sandal/ext/font-face/font-face";

2、依据自个儿供给覆盖font-face文件夹中的变量,注意变量应该在导入font-face在此以前,能够覆盖的变量如下:

$fontFamily:            icomoon !default;
$fontFilePath:          "../fonts/icomoon" !default;
$fontClassPrefix:       if !default; // icon-font
$fontClassAllSwitch:    true !default;
$fontClassOutput:       () !default;
$fontPseudo:            true !default; // 是否采用伪元素(before)生成图标

上面大家转移下class的前缀,然后输出全数的字体class

@import "d:/sandal/base";
$fontClassPrefix:      icon-font;
@import "d:/sandal/ext/font-face/font-face";

3、把font-face目录下的fonts文件夹拷贝进深入分析后的css文件夹同目录下,如css,js,fonts,images同目录

依靠地方的布局,贴出上边包车型地铁html和解析后的css代码:

html:

<i class="icon-font-wifi"></i>
<i class="icon-font-comment"></i>
<i class="icon-font-user"></i>
<i class="icon-font-map"></i>
...

css:

.icon-font-wifi::before, .icon-font-comment::before, .icon-font-user::before, .icon-font-map::before,...{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@font-face {
  font-family: icomoon;
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/icomoon.eot");
  src: url("../fonts/icomoon.eot?#iefix") format("eot"), url("../fonts/icomoon.svg#icomoon") format("svg"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype");
}
.icon-font-wifi::before, .icon-font-comment::before, .icon-font-user::before, .icon-font-map::before,...{
  display: inline-block;
  vertical-align: -2px;
  font-family: icomoon;
  font-size: 1.6rem;
  line-height: 1;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-font-wifi::before {
  content: "\e62f";

第四步:使用办法

  1Unicode方式

  Unicode是字体在网页端最原始的选用措施,特点是:

  • 宽容性最佳,援助ie6+,及具有当代浏览器
  • 支撑按字体的主意去动态调节Logo大小,颜色等等
  • 不帮忙多色。只好选择平台里单色的Logo,固然项目里有多色Logo也会自动去色

  注意:新版iconfont支持多色Logo,这一个多色Logo在Unicode方式下将无法选拔,假若有需要提出利用Symbol的援引情势

  使用手续如下:

  a) 拷贝项目下面生成的font-face

1 @font-face {
2     font-family: 'iconfont';
3     src: url('iconfont.eot');
4     src: url('iconfont.eot?#iefix') format('embedded-opentype'),
5        url('iconfont.woff') format('woff'),
6        url('iconfont.ttf') format('truetype'),
7        url('iconfont.svg#iconfont') format('svg');
8   }

  b) 概念使用iconfont的样式

1 .iconfont{
2     font-family:"iconfont" !important;
3     font-size:16px;
4     font-style:normal;
5     -webkit-font-smoothing: antialiased;
6     -webkit-text-stroke-width: 0.2px;
7     -moz-osx-font-smoothing: grayscale;
8   }

*  c) ***慎选相应图标并拿走字体编码,应用于页面**

1  <i class="iconfont">&#x33;</i> <!--"iconfont"是你项目下的font-family,默认是"iconfont"-->

&#x33;是字体编码,可在下载的demo.html中查看,或者可以在阿里矢量图标库的网站上,进入我的项目查看

永利集团304手机版 8

 2FontClass方式

  FontClassUnicode行使办法的一种变种,首假诺解决Unicode挥洒不直观,语意不显眼的难题。与Unicode采纳办法对待,具备如下特点:

  • 包容性非凡,帮忙ie8+,及持有当代浏览器
  • 相比于Unicode语意明显,书写更加直观。可以很轻易辨别那个icon是什么
  • 因为使用class来定义Logo,所以当要替换Logo时,永利集团304手机版,只必要修改class里面的unicode引用即可
  • 因为本质上如故采取的书体,所以多色图标如故不帮助

  使用手续如下:

  a) 引进项目下素不相识成的fontclass代码

1  <link rel="stylesheet" type="text/css" href="./iconfont.css">

iconfont.css代码里含有了@font-face.iconfont以至Logo的unicode援引,其实比较下能够窥见Unicode方式和FontClass办法是最最相似的,只可是他们二个用的是Logo的字体编码,一个用的是Logo的unicode引用而已

 1 @font-face {font-family: "iconfont";
 2     src: url('iconfont.eot?t=1495209181038'); /* IE9*/
 3     src: url('iconfont.eot?t=1495209181038#iefix') format('embedded-opentype'), /* IE6-IE8 */
 4     url('iconfont.woff?t=1495209181038') format('woff'), /* chrome, firefox */
 5     url('iconfont.ttf?t=1495209181038') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 6     url('iconfont.svg?t=1495209181038#iconfont') format('svg'); /* iOS 4.1- */
 7   }
 8 
 9   .iconfont {
10     font-family:"iconfont" !important;
11     font-size:16px;
12     font-style:normal;
13     -webkit-font-smoothing: antialiased;
14     -moz-osx-font-smoothing: grayscale;
15   }
16 
17   .icon-enter:before { content: "\e601"; }
18 
19   .icon-setUp:before { content: "\e600"; }

*  b) ***选择相应Logo并赢得类名,应用于页面**

1  <i class="iconfont icon-xxx"></i> <!--"iconfont"是你项目下的font-family,默认是"iconfont"-->

* icon-xxx*是行使了unicode引用的类名,可在下载的demo.html中查看,也许能够在Ali矢量Logo库的网站上,步入自家的花色查看。xxxLogo的名字,你能够在网址上修改图标的名字(FontClassSymbol都得以),不过切记要是你选取了在线链接,则必得在网址上创新在线链接,然后将该链接更新到你的种类中,假若你是地点利用,则必得下载最新的代码,然后更新到你的类型中,不然修改无效

永利集团304手机版 9

3、Symbol方式

  那是一种斩新的施用方法,应该说那才是鹏程的主流,也是Ali矢量Logo库平台最近援用的用法,可是在前端,新本领要向老设备看齐,所以您领会。 这种用法其实是做了二个svg的联谊,与另外二种相比较有着如下特征:

  • 辅助多色Logo了,不再受单色限制
  • 经过一些本事,协理像字体那样,通过font-size,color来调动体制(对于前二种也是一致适用的,fontsize更换大小,color更动颜色)
  • 宽容性很糟糕,辅助 ie9+及今世浏览器
  • 浏览器渲染svg的性情日常,还不及png

  使用手续如下:

  a) 引进项目下面生成的Symbol代码

 1
 <script src=”./iconfont.js”></script> 

*  b) ***加盟通用css代码(引进二遍就行)**

1 .icon {
2      width: 1em; height: 1em;
3      vertical-align: -0.15em;
4      fill: currentColor;
5      overflow: hidden;
6   }

*  c) ***采用相应Logo并拿走类名,应用于页面**

1  <svg class="icon" aria-hidden="true">
2     <use xlink:href="#icon-xxx"></use>
3   </svg>

4、默认的CSS文件

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome, firefox */
  url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg#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-brush:before { content: "\e602"; }

.icon-fountain_pen:before { content: "\e605"; }

.icon-thumbs_up:before { content: "\e609"; }
  • 为确定保证和大家的工程目录结构统一,建议将字体文件放在fonts目录下,那样大家要求修改@font-face下的url属性,
    src: url(‘../fonts/iconfont.ttf’)

    @font-face {font-family: 'iconfont';
    src: url('../fonts/iconfont.eot'); /* IE9*/
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    

先是步:拷贝项目下面生成的font-face

字体图标,相信大家都不面生,什么font-awesomeiconic等等,不过那个核心都以在web前端采纳,而要在微信小程序中选择,要求打开轻便的移植。

第二步:

检索你分类的基本点字—然后加入购物车,那个是免费的

永利集团304手机版 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
        @font-face {font-family: "iconfont";
          src: url('iconfont.eot?t=1491962079836'); /* IE9*/
          src: url('iconfont.eot?t=1491962079836#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff?t=1491962079836') format('woff'), /* chrome, firefox */
          url('iconfont.ttf?t=1491962079836') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg?t=1491962079836#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;
        }
    </style>
    <title></title>
</head>
<body>
    <div><i class="iconfont">&#xe600;</i>哈哈哈</div>
</body>
</html>

笔者们只供给fontello.ttfbase64编码文本和fontello.css的一部分字体Logo代码

其三步:下载到本地

永利集团304手机版 11

下载到本地,然后解压。会将联合后的字体文件及自动生成的css全部下载

永利集团304手机版 12

 

<view />

二、icomoon库的书体Logo使用

【使用手续】

【第一步】:

张开链接步向icomoon图标库

单击右上角的按键,步入Logo选拔分界面

【第二步】:

点选你供给的Logo,类似加盟购物车

下面的Selectionxxx(选中xx个)会清点你选了某些个Logo。然后单击步入你的已选Logo分界面,单击设置Logo旁边的preferences(偏爱设置)
采取帮助ie8,ie7&1e6,单击右下角 下载就可以。

【第三步】:

解压下载的书体Logo包,拷贝ie7和font三个文件夹到你的站点里面去。

【第四步】:

拷贝下载的字体Logo包里面包车型大巴文件style.css个中的内容到你的css页面

接下来重新修改@font-face里面包车型地铁链接,【首要】删掉那几个事物“?m3vgb7”,比如

修改前:

@font-face {
  font-family: ‘icomoon‘;
  src:  url(‘fonts/icomoon.eot?m3vgb7′);
  src:  url(‘fonts/icomoon.eot?m3vgb7#iefix’)
format(’embedded-opentype’)

改为当中链接:

@font-face {
  font-family: ‘icomoon‘;
  src:  url(‘../fonts/icomoon.eot’);
  src:  url(‘../fonts/icomoon.eot#iefix’)
format(’embedded-opentype’)

最后:

就能够随便的用下载到的字体图标啦!

直白<i class=”icon-名称”></i>就足以用了哦!

例如:

<a href=”#”><span>108</span><i
class=”icon-cloud-upload“></i>已发布</a>
<a href=”#”><span>10</span><i
class=”icon-archive“></i>草稿箱</a>
<a href=”#”><i
class=”icon-loader“></i>申请中</a>
<a href=”#”><span>90</span><i
class=”icon-square-check“></i>已通过</a>
<a href=”#”><span>1</span><i
class=”icon-square-cross“></i>被驳回</a>

最后css定义一下<i>标签里面包车型地铁字体的轻重属性(font-size=20px
2.0rem)就能够退换图标的高低哦!

 

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1491962079836'); /* IE9*/
  src: url('iconfont.eot?t=1491962079836#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1491962079836') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1491962079836') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1491962079836#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanhuidingbu:before { content: "\e60f"; }

.icon-xinfeng:before { content: "\e600"; }
@font-face { font-family: 'FontAwesome'; src: url(data:font/truetype;charset=utf-8;base64,上边转码后的base64) format('truetype'); font-weight: normal; font-style: normal;}

第一步:

第一步向阿里Baba(Alibaba)矢量图网站:

永利集团304手机版 13

使用手续如下:

// app.wxss@import "./libs/font-icon.wxss";

4.那时候入手会产出三个预览窗口,展现我们眼下参加购物车的那多少个Logo,大家挑选页面中的下载代码

转成base64很简单,不多说:

<link rel="stylesheet" type="text/css" href="./iconfont.css">
.icon-heart:before { content: '\e800'; } /* '' */.icon-heart-empty:before { content: '\e801'; } /* '' */.icon-star:before { content: '\e802'; } /* '' */.icon-star-empty:before { content: '\e803'; } /* '' */

7.使用unicode