Preface:
At present front-end development, such as Android, Web and so on, we used to use iconfont to display simple icons, like the original is not required before using the PS. This section demonstrates how to use the WPF IconFont icon fonts (the effect shown below).
About IconFont:
IconFont- Alibaba experience team effort to build, very powerful and very rich vector content icon icon library that provides vector icon downloads, online storage, format conversion.
Official website link: https: //www.iconfont.cn/
Log in and register IconFont:
Visit the official website https://www.iconfont.cn/, register and log in.
Creating IconFont project:
Click "icon management" \ "My project", enter the following page
"My projects" page button click below the arrow,
New Project pop-up dialog
Here I only modify the project name is microui, other default.
[Special attention to one thing: take note of the above FontClass / Symbol Font Family prefix and content, both specifically what's the use, I will explain at the end. ]
Modify the project name, click the "New" button on it.
From the chart you can see the new items There were no icons, then we will look to add an icon to it.
IconFont add an icon to the project:
There are many methods to add, you can add the official website of the icon, you can make your own icons to upload. Here I add only official website of the icon, enter icon in the search box, such as search here, "scan code"
The following results for the search
Casually looking for an icon, mouse over the top
Click on the arrow of the "Add storage" icon, you can see a shopping cart logo became the number 1
Then search for and add an icon, such as the search term "delete", "Search", you can see the upper right corner turned into a shopping cart logo 3
Top right, click "shopping cart" on the right side slide-out page
Here you can direct button "download stuff", but I do not want to do this, because it's easy follow-up management icon, so I click on the button "Add to project."
Select the item you just created "microui", then click "OK" button. Jump to page icon management interface
We click on the "Download to local" map arrow
The following diagram, we have been downloaded to the local
Next we use to create a WPF project.
VS create WPF project:
Create a WPF project using VS steps will not be repeated, create good works as follows
Import IconFont fonts to WPF projects:
We extract the downloaded before download.zip folder (stored path is not required after decompression), after extracting file folder contents as follows
We only need to use WPF iconfont.ttf them.
Right-click the project name, then click "Add" \ "current item", select iconfont.ttf
Click the "Add" button, you can see has been added to the project
Note: When the font files iconfont.ttf added to the project, unzip the download folder is not needed, can be deleted, because iconfont.ttf has been automatically copied to the project directory.
Here we show you how to use the icon.
Use IconFont icon:
Modify the code following MainWindow.xaml
I can see from the figure the TextBlock FontFamily set to "/ # iconfont", where the symbol '/' indicates the current root path assembly, the symbol '#' is fixed identification reference external fonts, "iconfont" represents the name of the font . Of course iconfont here on and parameters of the project we have created a relationship
As for relations and which have, behind repeat that.
FontFamily content format may be generally "/ namespace; Component / [path] # [Font Name]", such as may be provided here for the next arrow in FIG.
This naming convention is standard fly.
Similarly, when we write, noting Text value "& # xe688;", What the hell? The value that we add to IconFont project, the icon automatically added unicode values
While the color of the icon size can use the Foreground and FontSize change, is not it more convenient.
Let me then move about the location of the icon file, as shown below to create a new Fonts folder, drag the iconfont.ttf into the Fonts folder
FontFamily code changes as follows
Clean and rebuild the project run
It can still be displayed. Drag it to a new folder just for presentations iconfont.ttf added to another folder, FontFamily how to set.
Symbol prefix when creating IconFont:
I mentioned before when creating IconFont engineering, FontClass / Symbol Font Family prefix and content, both specifically what is the use?
Here is a project I created another
Which Symbol prefix: dazhuang
FontFamily content: dzfont
And add an icon
Download it to local and iconfont.ttf after import project
You can see where the arrow becomes a FontFamily I just set. As Symbol prefix is not actually used in the WPF project, but rather uses automatically generated in HTML CSS, the
Extended:
You can also use the style sheet, as I downloaded the demo code for
/////////////////////////////////////////////////////////////////////////////////////////
** original article, reproduced, please attach the declaration part
** Source: https://blog.csdn.net/mybelief321
** Author: Nine Zero Zhuang
/////////////////////////////////////////////////////////////////////////////////////////
