CSS +圖標=徽標

-2

如何僅使用CSS和隨時可用的圖標集製作基於圖標的基於字母的徽標？CSS +圖標=徽標

我試過從標準圖形包中加載圖標集，但結果不令人滿意。

Here is a solution I tried using CSS + Font Awesome。

http://jsbin.com/najakoraqa/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Logos Using CSS + Font-Awesome</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

    <style> 

    body { 
     font-size: 100px; 
     color: red; 
    } 

    .fa-logo:before { 
     font-family: Impact, Charcoal, sans-serif; 
     font-weight: bold; 
     font-style: italic; 
    } 

    .fa-l:before { 
     content: 'L'; 
     margin-right: -.2em; 
    } 

    .fa-z:before { 
     content: 'Z'; 
     margin-left: -.4em; 
    } 

    </style> 

</head> 

<body> 
    <span class="fa fa-logo fa-l"></span> 
    <span class="fa fa-bolt"></span> 
    <span class="fa fa-logo fa-z"></span> 
</body> 
</html>

來源

2016-03-06 Mowzer

這個問題是不是太廣，意見或根據需要討論，所以是題外話堆棧溢出。如果您有特定的，可回答的編程問題，請提供完整的詳細信息。 –

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700); 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
*, 
 
:before, 
 
:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    min-height: 100%; 
 
} 
 
body { 
 
    font-family: 'Oswald', sans-serif; 
 
    color: #fff; 
 
    background-color: #000; 
 
} 
 
.wrapper { 
 
    text-align: center; 
 
} 
 
.title { 
 
    font-size: 2em; 
 
    position: relative; 
 
    margin: 0 auto 1em; 
 
    padding: 1em 1em .25em 1em; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 
.title:after { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    width: 240px; 
 
    height: 4px; 
 
    margin-left: -120px; 
 
    content: ''; 
 
    background-color: #fff; 
 
} 
 
/* Clip text element */ 
 

 
.clip-text { 
 
    font-size: 8em; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: .25em; 
 
    padding: .5em .75em; 
 
    text-align: center; 
 
    /* Color fallback */ 
 
    color: #fff; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
} 
 
.clip-text:before, 
 
.clip-text:after { 
 
    position: absolute; 
 
    content: ''; 
 
} 
 
/* Background */ 
 

 
.clip-text:before { 
 
    z-index: -2; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: inherit; 
 
} 
 
/* Text Background (black zone) */ 
 

 
.clip-text:after { 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: .125em; 
 
    right: .125em; 
 
    bottom: .125em; 
 
    left: .125em; 
 
    background-color: #000; 
 
} 
 
/* Change the background position to display letter when the black zone isn't here */ 
 

 
.clip-text--no-textzone:before { 
 
    background-position: -.65em 0; 
 
} 
 
.clip-text--no-textzone:after { 
 
    content: none; 
 
} 
 
/* Use Background-size cover for photo background and no-repeat background */ 
 

 
.clip-text--cover, 
 
.clip-text--cover:before { 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
    background-size: cover; 
 
} 
 
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */ 
 

 
.clip-text_one { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/7); 
 
} 
 
.clip-text_two { 
 
    background-image: url(http://lorempixel.com/480/200/abstract); 
 
} 
 
.clip-text_tree { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/2); 
 
} 
 
.clip-text_four { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/4); 
 
} 
 
.clip-text_five { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/5); 
 
} 
 
.clip-text_six { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/9); 
 
} 
 
.clip-text_seven { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/8); 
 
} 
 
.clip-text_eight { 
 
    background-image: url(http://lorempixel.com/410/200/people); 
 
} 
 
.clip-text_nine { 
 
    background-image: url(http://lorempixel.com/480/200/nightlife); 
 
} 
 
.clip-text_ten { 
 
    background-image: url(http://lorempixel.com/480/200/nightlife/8); 
 
} 
 
.clip-text_eleven { 
 
    background-image: url(http://lorempixel.com/480/200/fashion/10/cc); 
 
    background-size: cover; 
 
} 
 
.clip-text_twelve { 
 
    background-image: url(http://lorempixel.com/480/200/people/7/cc); 
 
} 
 
.clip-text_thirteen { 
 
    background-image: url(http://lorempixel.com/480/200/food/5/cc); 
 
} 
 
.clip-text_fourteen { 
 
    background-image: url(http://lorempixel.com/480/200/city/9/cc); 
 
} 
 
.clip-text_fifteen { 
 
    background-image: url(http://lorempixel.com/480/200/nightlife/5); 
 
}

<div class="wrapper"> 
 
    <p class="title">Play with background-clip text</p> 
 
    <div class="clip-text clip-text_one">Sam</div> 
 
    <div class="clip-text clip-text_fifteen clip-text--no-textzone">Sam</div> 
 
    <div class="clip-text clip-text_twelve clip-text--cover">Sam</div> 
 
    <div class="clip-text clip-text_tree clip-text--no-textzone">Sam</div> 
 
    <div class="clip-text clip-text_two">Sam</div> 
 
    <div class="clip-text clip-text_fourteen clip-text--cover">Sam</div> 
 
    <div class="clip-text clip-text_tree">Sam</div> 
 
    <div class="clip-text clip-text_eleven clip-text--cover">Sam</div> 
 
    <div class="clip-text clip-text_four">Sam</div> 
 
    <div class="clip-text clip-text_five">Sam</div> 
 
    <div class="clip-text clip-text_six">Sam</div> 
 
    <div class="clip-text clip-text_seven">Sam</div> 
 
    <div class="clip-text clip-text_eight">Sam</div> 
 

 
    <div class="clip-text clip-text_nine">JINTOS</div> 
 
    <div class="clip-text clip-text_ten">JINTOS</div> 
 
    <div class="clip-text clip-text_thirteen clip-text--cover">JINTOS</div> 
 
</div>

這些都是15個的例子，我創建ü可以更改背景圖片或文字，按您的選擇，並提供專業的photoshop外觀。希望你喜歡它，請評價它，如果你喜歡它！ :)謝謝 -paces山姆

來源

2016-03-06 10:56:42

我很高興你喜歡它。 :-) –

@Mowzer任何問題都可以關閉，對答案進行投票將無法保護它。建議投票的交易未獲批准，並可能受到版主注意，導致懲罰性行爲。 –

@Mowzer如果你被低估了，那只是因爲你的問題太差。修改它，顯示你的問題，以及你卡在哪裏。像你試圖用圖標設置一樣... –

你也可以用mix-blend-mode也玩，沒有特殊的字體，是富有想象力的。

以下：letter-spacing,font-size和mix-blend-mode模擬background-clip:text和text-fill-color。

codepen與現場發揮：http://codepen.io/gcyrillus/pen/mPeNXy

#mxclptxt { 
 
    background:url(http://lorempixel.com/640/480/abstract); 
 
    display:table; 
 
    margin:1em; 
 
    overflow:hidden 
 
    } 
 
p { 
 
    background:black; 
 
    color:white; 
 
    font-size:100px; 
 
    font-wheight:bold; 
 
    text-shadow:2px 2px gray, 4px 4px gray;; 
 
    padding:0.5em 1em; 
 
    margin:0.5em -0.5em; 
 
    letter-spacing:-25px; 
 
    font-family:courier; 
 
    mix-blend-mode:multiply; 
 
    transform:rotate(-15deg)

<div id="mxclptxt"> 
 
    <p>My Logo</p> 
 
</div>

來源

2016-03-06 11:30:02

CSS +圖標=徽標

回答

相關問題