Socicon字體不顯示圖標，只是字母

我已經按照在線步驟，仍然無法獲得圖標顯示。我相信在沒有正確設置字體路徑之前，有人遇到過這個問題。我的路徑是正確的，但仍然沒有運氣。任何想法？Socicon字體不顯示圖標，只是字母

HTML

<section class="social"> 
    <ul> 
     <li><div class="container"><a href="https://twitter.com/xxx" target="_blank" class="icon" id="twitter">a</a></div></li> 
     <li><div class="container"><a href="https://www.linkedin.com/pub/xxx" target="_blank" class="icon" id="linkedin">j</a></div></li> 
     <li><div class="container"><a href="https://www.facebook.com/xxx" target="_blank" class="icon" id="facebook">b</a></div></li> 
    </ul> 
</section>

CSS

@font-face { 
    font-family: 'socicon'; 
    src: url('../fonts/socicon-webfont.eot'); 
    src: url('../fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/socicon-webfont.woff') format('woff'), 
    url('../fonts/socicon-webfont.ttf') format('truetype'), 
    url('../fonts/socicon-webfont.svg#sociconregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

.icon { 
    color: #ffffff; 
    font-family: 'socicon' !important; 
    font-size: 28px; 
    text-decoration: none; 
    position: absolute; 
    top: 1%; 
    padding-left: 17px; 
    padding-right: 17px; 
    padding-top: 30px; 
    padding-bottom: 60px; 
    transition: all .4s linear; 
    -webkit-transition: all .4s linear; 
    -moz-transition: all .4s linear; 
    -o-transition: all .4s linear; 
    -ms-transition: all .4s linear; 
}

來源

2014-09-23 Dan_ENZ

在CSS樣式表中聲明字體。 – 2014-09-23 12:14:42

檢查頁面的源代碼，點擊字體'src'中的鏈接，看看它是否在某個地方引用...機會是鏈接不正確... – webeno 2014-09-23 12:14:45

@ Sam1604這是一個[@ font-face]（https ：//developer.mozilla.org/en-US/docs/Web/CSS/@font-face）聲明。 – Scimonster 2014-09-23 12:14:50

不知道你在做什麼錯，但如果你遵循這些步驟，它應該工作。

正如你所說，這是你的文件夾結構：

/ 
fonts/ <-- this is the fonts folder where you have physicallydownloaded the fonts 
style.css <-- this is your CSS file 
index.html <-- this is your html file

在你的HTML文件，請確保調用正確的CSS文件：

<link rel="stylesheet" type="text/css" href="style.css">

在你的CSS文件

，請確保您'正確引用字體：

@font-face { 
    font-family: 'socicon'; 
    src: url('fonts/socicon-webfont.eot'); 
    src: url('fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'), 
    url('fonts/socicon-webfont.woff') format('woff'), 
    url('fonts/socicon-webfont.ttf') format('truetype'), 
    url('fonts/socicon-webfont.svg#sociconregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

如果這不起作用，可能是您的文件夾結構是不是你如何描述，所以移動東西或改變引用/調用不同的文件，你會得到它的工作。

來源

2014-09-23 12:44:55 webeno

我已經在HTML中添加了css調用，但仍然沒有運氣...我的文件夾結構必須正確，無法理解它可能是錯誤的...我有一個名爲A3的文件夾，此文件夾內部是HTML索引文件，一個名爲CSS的文件夾來保存style.css文件夾和一個名爲fonts來保存字體文件的文件夾..你有沒有一個精確的代碼放在這裏，我可以嘗試嗎？ – 2014-09-23 20:47:34

從你從這個字體工具包的網站的存在證明這是工作，你做錯了什麼事情是不可能找出你提供的細節水平......如果我提供了另一個網站我可以做到這一點，這將如何幫助你的情況？它不會！你將不得不打包這些文件和文件夾，讓你的引用正確，它會工作。 – webeno 2014-09-23 21:15:25

我在使用wordpress時遇到了與socicon字體相同的問題。這是我能夠使用socicon字體的方式：
1.從www.socicon.com下載字體（socicon.zip）
2.提取zip文件夾。複製提取的文件夾，名爲'socicon，並粘貼到文件夾中「wp-content/theme/theme_name_here/... pasted_SOCICON_folder_here ...」
3.修改style.css（wp-content/theme/theme_name_here/style的CSS）。
添加了這個：@import url（'socicon/socicon.css'）;
4.最後，使用的字體在我的wp崗位，例如：

<span style="font-family: socicon; color: skyblue; font-size: 20px;">a</span><a href="http://www.twitter.com/RenShres1"> twitter</a> 
<br> 
<span style="font-family: socicon; color: blue; font-size: 20px;">b</span><a href="http://www.facebook.com/link.to.ren"> facebook</a>

乾杯:)

[我是新來的，所以我不知道如何發佈代碼.. 。]

來源

2014-10-09 11:17:11

Socicon字體不顯示圖標，只是字母

回答

相關問題