iconfont阿里雲的使用

 

首先咱們要找到網址：http://iconfont.cn/，這裏我用的是個人新浪微博登陸的，爲何呢？由於我忘記我github的帳號了哈哈哈···

而後找到本身想要的圖標或字體，好比我想要user的圖標

 

而後點擊加入購物車

而後去找本身的購物車

添加到新項目

新建一個

生成代碼

複製代碼

@font-face {
font-family: 'iconfont'; /* project id 524613 */
src: url('//at.alicdn.com/t/font_524613_8i4pohmjwcdi.eot');
src: url('//at.alicdn.com/t/font_524613_8i4pohmjwcdi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_524613_8i4pohmjwcdi.woff') format('woff'),
url('//at.alicdn.com/t/font_524613_8i4pohmjwcdi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_524613_8i4pohmjwcdi.svg#iconfont') format('svg');
}

 

複製每個小代碼

就是：

而後放在html裏面用就是：

<i class="iconfont">&#xe600;</i>

css是：

@font-face {
font-family: 'iconfont'; /* project id 524580 */
src: url('//at.alicdn.com/t/font_524580_n6glz6q2pg4uc8fr.eot');
src: url('//at.alicdn.com/t/font_524580_n6glz6q2pg4uc8fr.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_524580_n6glz6q2pg4uc8fr.woff') format('woff'),
url('//at.alicdn.com/t/font_524580_n6glz6q2pg4uc8fr.ttf') format('truetype'),
url('//at.alicdn.com/t/font_524580_n6glz6q2pg4uc8fr.svg#iconfont') format('svg');
}

.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px
}

 

而後使用class類名的形式引入，首先回到這個地方：

點擊肩頭指的地方，若是線上操做方便的話，直接生成連接能夠。爲了方便本地操做，咱們下載到本地，而後只要其中的這五個文件：

將iconfont.css引入，而後在標籤內這樣引入：

<p class="iconfont icon-cart"></p>

就能夠了！

若是實在webpack裏面使用，別忘了下載 file-loader ！

 

 下面咱們說一種字體：回首頁

點擊在線字體：

引入線上字體，首先你要先輸入本身的文字，而後添加本身想要的字體，而後生成字體！注意必定是本身要什麼內容就寫什麼！！！

 

@font-face {font-family: 'webfont';
  src: url('//at.alicdn.com/t/webfont_jbf9qawnbjll3di.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_jbf9qawnbjll3di.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/webfont_jbf9qawnbjll3di.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/webfont_jbf9qawnbjll3di.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/webfont_jbf9qawnbjll3di.svg#NotoSansHans-Black') format('svg'); /* iOS 4.1- */

}

而後咱們在文字裏面應用就能夠啦！

div{ font-family: 'webfont'; }