字体图标小记
2018-09-10 本文已影响0人
随心_97e5
一:字体图标可以当成文字字体,浏览器通过其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:,统一协议。

三:方法2
不容易辨认unicode码,设置方法2
1、修改icon的名字,如果名字好记,也可以不修改,爱改不改吧
2、点击fontcss复制下方代码
通过link标签导入css,注意不要导入到css语句了,不需要加style
3、body里面标签加上class="iconfont icon-daoju",不用加输出都可以

4、详细代码
http://js.jirengu.com/zeluk/14/edit


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

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

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

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

4、导入link代码,并在body加上class属性。
http://js.jirengu.com/vipuy/1/edit
