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 +图标=徽标

回答

相关问题