阿里巴巴字体图标练习

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>字体图标练习</title>    <style>        /*1.!/寻找项目中字体图标的连接代码*!*!*/        @font-face {            font-family: ‘iconfont‘;  /* project id 395624 */            src: url(‘//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.eot‘);            src: url(‘//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.eot?#iefix‘) format(‘embedded-opentype‘),            url(‘//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.woff‘) format(‘woff‘),            url(‘//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.ttf‘) format(‘truetype‘),            url(‘//at.alicdn.com/t/font_395624_40kjcpbbdanvobt9.svg#iconfont‘) format(‘svg‘);        }        @font-face {            font-family: ‘iconfont‘;  /* project id 394512 */            src: url(‘//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.eot‘);            src: url(‘//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.eot?#iefix‘) format(‘embedded-opentype‘),            url(‘//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.woff‘) format(‘woff‘),            url(‘//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.ttf‘) format(‘truetype‘),            url(‘//at.alicdn.com/t/font_394512_86mrdhjgq89w9udi.svg#iconfont‘) format(‘svg‘);        }        @font-face {            font-family: ‘iconfont‘;  /* project id 395624 */            src: url(‘//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.eot‘);            src: url(‘//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.eot?#iefix‘) format(‘embedded-opentype‘),            url(‘//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.woff‘) format(‘woff‘),            url(‘//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.ttf‘) format(‘truetype‘),            url(‘//at.alicdn.com/t/font_395624_bsp5n8iy9vp74x6r.svg#iconfont‘) format(‘svg‘);        }        .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;            color:red;            font-size: 32px;        }    </style></head><body>    <!--2.类名为iconfont-->    <!--3.复制图标字体代码-->    <!--4.导入阿里巴巴字体图标的压缩后的文件-->    <i class="iconfont"></i>    <i class="iconfont"></i>    <i class="iconfont"></i>    <i class="iconfont"></i>

</body></html>
时间: 2024-10-11 18:48:41

阿里巴巴字体图标练习的相关文章

字体图标的用法

第一次听说字体图标--iconfont,感觉是:哇,好高大上的样子,会不会很难啊.然而当真正去用的时候,才发现,网上的字体图标库为我们做了太多工作,我们只需要傻瓜式的挑选自己需要的图标,傻瓜式的复制粘贴就可以将各种的小图标以字体的方式加入到我们的页面中了. 本文为大家讲述的是如何使用阿里巴巴字体图标库: 第一步:在百度或其他搜索引擎中搜索"iconfont",如果是百度的话,应该第一条搜索结果就是"Iconfont-阿里巴巴矢量图标库". 第二步:点击进入"

在uni-app中使用阿里巴巴图标库字体图标

阿里巴巴图标库 添加图标.下载.引入的使用方法: 1.添加图标 2.下载到字体图标文件后,复制圈中的两个文件到static目录下:         3.新建一个自定义字体图标样式文件: font-icon.css 4.给font-icon.css添加内容  5.font-icon.css具体代码: @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('[email protect

UWP 矢量字体图标(iconfont)使用

本文使用 阿里巴巴开源字体: 选择矢量字体图标: 查看或编辑 Unicode编码 或字体名称 下载到本地,添加到uwp项目 代码中写法 Text:Unicode编码 FontFamily:文件路径#字体名称 效果图: 参考资料 http://www.alessiosimoni.com/custom-fonts-in-windows-10-uwp/ http://www.cnblogs.com/anding/p/4961215.html

WPF自定义控件与样式(1)-矢量字体图标(iconfont)

一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便,推荐 阿里巴巴开源字体: 字体文件非常小,比使用png等图片文件

开发 常用图标 阿里巴巴-矢量图标

阿里巴巴-矢量图标库 此网站 1.能搜到官方和个人提供的优秀图标 再也不用担心不会用photoshop~再也不用担心没图标,做不出界面了~ 2.能生成复杂的字体 IP地址:http://iconfont.cn/ 网站界面: 转自:http://Www.CnBlogs.Com/WebEnh/ 感谢WebEnh的提供~

字体图标使用笔记

字体图标使用笔记: 优缺点: 首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 优点: 加载文件体积小 统一展示风格,使用方法 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单 可以添加一些视觉效果如:阴影.旋转.透明度 兼容IE6 后期维护成本很低 缺点: 制作门槛有点高,需要借助专业的工具生成字库文件 需要服务器做些相应的配置来解决识别问题和跨域问题 两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Fon

阿里巴巴矢量图标库的使用

1,打开阿里巴巴矢量图标库 http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1 2,选择需要的图标加入购物车: 3,将购物车中的图标加入本地项目: 第一种方法: (1)获取在线链接,将获取到的在线链接复制到编辑器css文件: (2)<i class="iconfont">unicode<i/><i class="ico

iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

微信小程序使用字体图标的方法

一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://transfonter.org/,把刚才下载的ttf字体文件转化成base64格式 原文:http://www.soswen.com/article/10 三.下载下来之后解压找到stylesheet.css ,打开文件,复制这些内容到wxss里: 四.打开之前在阿里巴巴下载的压缩包,找到iconfont.