如果不能下载,请加微信 Niuhaowu 告知
问题:蓝奏云链接无法正常打开
解决:将链接中的 lanzous替换lanzoux
或者:将链接中的 lanzous替换lanzoui

找矢量图,就上阿里巴巴矢量图库啊。

Iconfont https://www.iconfont.cn

阿里巴巴矢量图库,估计很多学设计的朋友都知道。

使用方法这个链接里有 https://blog.csdn.net/qq_33645229/article/details/79551062

1、阿里巴巴矢量图网址:www.iconfont.cn

2、然后用新浪微博账号登录

3、输入要查找的图标相应的关键字,回车

4、滑过要找的图标,点击购物车,让图标存储到暂存架中

5、点击暂存架,存储为新的项目

6、输入项目名,就会跳转到项目管理界面

7、然后点击下载到本地就会生成一个iconfont.zip的文件包

8、解压后,将iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff等几个字体文件复制到真实的项目环境css目录(与iconfont.css中复制出来的代码同级)中

9、并将iconfont.css中的代码copy到真实项目的css文件中

10、在真实项目页面上需要引用该字体图标的地方,加上class=”iconfont”这个类

11、然后打开解压后的demo.html,看到字体图标对应的编码是类似这样的编码,一个编码对应一个字体图标

12、像这样引用进去就可以使用图标效果了<i class=”iconfont”>&#xe600;</i>

13、还可以直接引用字体图标编码下的类名也可以:<i class=”iconfont shouye”></i>

注:字体图标的大小可以在.iconfont样式里面通过font-size:更改

高级实战经验:

1、无论下载几个字体图标,.iconfont这样的字体类只需引用一次

.iconfont {
font-family:”iconfont” !important;
font-size:22px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

注意:如果还想修改图标颜色之类,只需要.iconfont 后面加个自定义类覆盖.iconfont上面的样式即可

2、解压后,将iconfont.eot、iconfont.svg、iconfont.ttf、iconfont.woff等几个字体文件复制到真实的项目环境中,每个字体图标的这几个字体文件必须都得复制进去,在css目录中建一个font(或在images中建立,或单独建立)目录,专门分门别类的来放这些个字体文件,如:在font中建一个search目录放入这四个字体文件,同时建一个doc目录放另外的文档图标的四个字体文件;

3、接着2讲,分别放置好字体文件后,怎么引用才能区隔开这些个字体图标呢,引用路径是关键

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

看到上面的代码没,每个字体图标的@font-face样式也是要单独引用进来的,每个url后面的路径就是你放置字体文件的目录路径了。

 

转载请注明出处哦~:搜罗666 » 找矢量图,就上阿里巴巴矢量图库啊。

顶 (0)

评论 0

置顶文章