This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for unicode-range and @font-face here.
本文是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。 您可以在此处查看unicode-range和@font-face的完整成绩单和截屏视频。
Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on using unicode characters.
欢迎来到我们的AtoZ CSS系列！ 在本系列中，我将探索不同CSS值(和属性)，每个均以不同的字母开头。 我们知道有时截屏视频还不够，因此在本文中，我们添加了有关使用Unicode字符的快速提示。
U是Unicode字符 (U is for Unicode Characters)
Unicode characters can be really handy for adding little symbols and icons to your HTML or in your CSS via pseudo elements’ content property. Here are a handful of tips for using unicode characters.
Unicode字符非常方便，可以通过伪元素的content属性将少量符号和图标添加到HTML或CSS中。 这是使用Unicode字符的一些技巧。
在CSS中设置字符集 (Set the character set in your CSS)
If you want to use unicode characters in your CSS file, ensure you set the character set for your CSS in addition to setting the charset meta tag in your HTML document.
如果要在CSS文件中使用Unicode字符，除了在HTML文档中设置charset meta标记外，还要确保为CSS设置了charset 。
<!-- in your HTML <head> -->
<meta charset= "utf-8"/>/* in your CSS at the top of the file*/
@charset 'utf-8';使用Trigram for Heaven符号作为简单的汉堡包图标 (Use the Trigram for Heaven symbol as a simple hamburger icon)
When needing to knock together a quick demo site or a video screencast for a responsive tutorial, I often use the love-it-or-hate-it hamburger icon for a mobile menu. There are lots of icon solutions out there and there are many non-raster approaches to the hamburger icon but often the quickest and easiest for me is to use the unicode character called “The Trigram for Heaven” which looks like this: ☰.
当需要快速响应演示站点或响应式教程的视频截屏时，我经常在移动菜单中使用“喜欢或讨厌”汉堡包图标。 那里有很多图标解决方案，并且有很多非光栅方法来制作汉堡图标，但对我而言，最快捷，最容易的方法是使用名为“天堂的Trigram”的Unicode字符，如下所示： ☰ 。
It looks just like a hamburger icon. And here’s how I’d often add it to my nav:
它看起来就像一个汉堡包图标。 这是我经常将其添加到导航中的方式：
<nav class="site-nav">
<ul class="site-nav-menu">
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
</ul>
<a href="#" class="site-nav-icon">☰</a>
</nav>搜索并快速复制和粘贴unicode字符 (Search for and quickly copy and paste unicode characters)
I came across the hamburger character whilst searching through the library of available unicode characters at copypastecharacter.com.
我在copypastecharacter.com上搜索可用的Unicode字符库时遇到了汉堡包字符。
They have a whole load of arrows, graphical shapes, mathematical symbols, punctuation and some weird and wonderful one-off characters for you to search through and easily copy and paste into your code. Pretty handy stuff.
它们包含箭头，图形形状，数学符号，标点符号以及一些奇怪而奇妙的一次性字符，供您搜索并轻松复制并粘贴到代码中。 很方便的东西。
1497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
