html5 - Ce logo est-il créé à l'aide de styles CSS ?

Question

J'ai regardé le code source de l'icône pour transmettre ce genre de commentaire. Il semble que ce ne soit pas une image, cela semble être un style

.

Answer 1

Iconfont l'a implémenté : http://www.iconfont.cn/

Answer 2

Recherchez ce site Web avec une icône, puis générez un fichier CSS. Citez-le simplement lorsque vous l'utilisez

.

Answer 3

En fait, iconfont est utilisé.
Définissez les polices qui ne sont pas disponibles dans le système du navigateur sur la page Web
Le navigateur télécharge le fichier de police et le restitue avec la police correspondante

.

La soi-disant police est le graphique correspondant à l'encodage des caractères
Par exemple, l'icône du téléphone ci-dessous est en fait un mot
Vous pouvez choisir de copier et coller
Mais selon l'environnement, les polices correspondantes sont différentes
Le formulaire d'affichage peut être différent
Dans le pire des cas, il peut être défini. S'il n'y a pas de graphique correspondant à cet encodage dans la police, il ne sera pas affiché.
☎

Pour plus de détails, veuillez consulter l'utilisation d'iconfont

L'avantage de ceci est évident, la police est également du texte, et la taille, la couleur et la décoration de la police peuvent être définies en fonction d'autres éléments de texte sans distorsion de mise à l'échelle

L'inconvénient est également évident, ce n'est pas une image, donc des icônes colorées comme l'image ne peuvent pas être réalisées

Answer 4

Il est implémenté à l'aide d'icônes. Celui publié ci-dessus n'est qu'un site Web. Laissez-moi vous dire quelque chose de spécifique.
1. Sélectionnez d'abord l'icône sur le site Web et enregistrez-la dans un projet, puis téléchargez-la localement (vous pouvez également utiliser un lien en ligne ici, l'image ci-dessous montre les deux méthodes de fonctionnement, également en iconfont)

Introduisez des liens locaux ou en ligne en 2.css (photo ci-dessus), la méthode locale est la même.

3. Spécifiez la famille de polices comme icône dans le style à utiliser et utilisez le code de l'icône, par exemple en rechargeant la première icône en cours de route

.myIcon{
    font-family: icon;
}
<span class="myIcon">&#xe6d6;<icon>

Answer 5

Le frontal ressemble vraiment aux Huit Immortels traversant la mer, chacun montrant ses pouvoirs magiques. En plus des icônes, il peut également faire du base64, du svg et même du canevas

.

Answer 6

Le moyen le plus simple est d'utiliser bootstrap
http://v3.bootcss.com/compone...
link introduisez bootstrap, puis ajoutez simplement le nom de la classe directement à l'étiquette
<button class="btn btn-default "> Plein écran<span class="glyphicon glyphicon-fullscreen"></span></button>