封裝字體圖標庫
參考了以下博客:
https://blog.csdn.net/Doulvme/article/details/54290450
https://blog.csdn.net/qq_25479327/article/details/77167585
https://blog.csdn.net/muzidigbig/article/details/80371341
查找圖標並下載
1.打開阿裏的矢量字體圖標庫(http://iconfont.cn/collections)並登陸.
2.搜尋需要的圖標加入購物車.
3.點擊購物車選擇-->下載代碼.
4.解壓
詳細介紹
真正有用的是紅色選中的,剩余的是使用的演示.
圖標使用
1.通過類名方式使用圖標:
首先打開iconfont.css,其中紅色標記的地方時可以修改的,如果移動了文件,寫上正確的url路徑.
其中類名icon是給圖標添加樣式的,自己可以改
2.通過svg標簽方式
<script src="iconfont.js"></script>
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-15tianwuliyoutuihuo"></use> </svg>
第一種方式我們修改了iconfont.css中的類名也不會影響svg的使用,因為第二種方式是不使用類名的,所以不會影響.
第二種方式我們需要引入iconfont.js文件.然後通過修改#icon- 後面的值獲得圖標.圖標的名稱和unicode我們可以在.svg後綴的文件夾中查看.
3.通過使用unicode編碼方式
需要寫入font-face:
<style type="text/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 {
/*iconfont與@font-face中的font-family的字體名稱保持一致*/ 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>
</head>
<body>
<div class="main markdown">
<h1>IconFont 圖標</h1>
<ul class="icon_lists clear">
<li>
<!--顯示圖標-->
<!--與上面的css中綠色背景類名一致,icon是圖標樣式的類名-->
<i class="icon iconfont"></i>
<!--顯示文字-->
<div class="code">&#xe606;</div>
</li>
封裝字體圖標庫