美文网首页
字体图标小记

字体图标小记

作者: 随心_97e5 | 来源:发表于2018-09-10 21:34 被阅读0次

一:字体图标可以当成文字字体,浏览器通过其Unicode码来绘制网页。

二、添加icon的步骤

1、打开iconfont的网站www.iconfont.cn

2、添加合适的icon到购物车,并添加到项目。点击在线链接复制代码

3、将复制的代码放在css语句内,同时把icon下方的icon对应的Unicode码放到body内。

为icon定义fontfamily!

ps iconfont项目名可以更换

不加http:在本地编译器是无法展示的,//代表和目前的协议保持一致,浏览器采用http,代码采用的就是http。但在本地采用的file协议,所以无法正确展现!解决方案有两种:1加本地http server,2加上http:,统一协议。

font

三:方法2

不容易辨认unicode码,设置方法2

1、修改icon的名字,如果名字好记,也可以不修改,爱改不改吧

2、点击fontcss复制下方代码

通过link标签导入css,注意不要导入到css语句了,不需要加style

3、body里面标签加上class="iconfont icon-daoju",不用加输出都可以

css

4、详细代码

http://js.jirengu.com/zeluk/14/edit

daim
ff

打开css的网址,发现也是在线创建了一个名为iconfont的在线字体库。将unicode和icon名对应了起来


css

四:

1、打开https://www.bootcdn.cn/网址,查找到awesome

awesome

2、查找font-awesome,并复制link语句

css

3、点击awesome里面icon网页,查找到icon名字。

4、导入link代码,并在body加上class属性。

http://js.jirengu.com/vipuy/1/edit

相关文章

  • 字体图标小记

    一:字体图标可以当成文字字体,浏览器通过其Unicode码来绘制网页。 二、添加icon的步骤 1、打开iconf...

  • Bootstrap布局组件——字体图标

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。字体图标用于显示...

  • 字体图标

    9字体图标 1. 字体图标优点 2. 字体图标使用流程 总体来说,字体图标按照如下流程: 3. 设计字体图标...

  • 【Appetite】ionic3实录(三)修改自定义图标

    常见图标有图像图标和字体图标两种,在移动端,字体图标对比图像图标有不少优点,所以一般采用字体图标为主。而字体图标的...

  • 手把手教你使用字体图标

    常用字体图标库 阿里字体图标库 iconfont fontawesome 字体图标库 首先使用阿里的字体图标库上个...

  • Bootstrap 布局组件

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。虽然,Glyph...

  • 01-字体图标配置和使用

    一、什么叫做字体图标? 可以像使用字体一样使用图标 一般辨别是否是字体图标主要是看图标是否是纯色 二、字体图标有那...

  • 2019-04-11 字体图标(Glyphicons)(1)

    什么是字体图标? 字体图标是在 Web 项目中使用的图标字体。虽然,Glyphicons Halflings需要商...

  • 阿里的字体库—iconfont

    阿里字体图标库介绍及图标字体的使用方法 这篇文章只讲阿里字体图标库的使用,暂不讲图标制作,阿里矢量图标库上的字体图...

  • Axure使用图标字体(icon font)

    什么是图标字体? 图标字体就是在做手机APP或WEB项目时为了能方便控制图标的大小、颜色等属性而将图标字体化 图标...

网友评论

      本文标题:字体图标小记

      本文链接:https://www.haomeiwen.com/subject/oslegftx.html